如何为< aside>设置高度值100%高度不超过表的容器的100%的容器中不使用表格 [英] How can i set height value 100% for <aside> in container with height is not 100% of body not using tables

查看:86
本文介绍了如何为< aside>设置高度值100%高度不超过表的容器的100%的容器中不使用表格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下HTML:

<body>
    <div class="container">
        <div class="aside">
            Lorem
        </div>
        <div class="content">
            Ipsum <br/> dolor <br/> sit <br/> amet <br/>
        </div>
    </div>
</body>

以及以下CSS:

body { 
    padding-top:50px;
}
.aside {
    width: 300px;
    float:left;
}
.content {
    width: 670px
    float: left;
}

如果.container高度是.content含量的100%,如何设置.aside高度是.container的100%.谢谢.

How can i set .aside height is 100% of .container if .container height is 100% of .content content. Thanks.

推荐答案

您应将其放在一边,并将高度设置为100%,并将容器设置为相对,例如:

You should put your aside to absolute position and set height to 100% and set the container to relative like:

.container {
    position: relative;
    height: 100%;
    background-color: black;
}
.aside {
    width: 300px;
    position: absolute;
    background-color: red;
    height: 100%;
}
.content {
    width: 670px;
    background-color: green;
    margin-left: 300px;
}

<div class="container">
  <div class="aside">
    Lorem
  </div>
  <div class="content">
    Ipsum <br/> dolor <br/> sit <br/> amet <br/>
  </div>
</div>

这篇关于如何为&lt; aside&gt;设置高度值100%高度不超过表的容器的100%的容器中不使用表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆