Question

我有以下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;
}

如果.aside身高是.container内容的100％，我如何设置.container身高是.content的100％。感谢。

enter image description here

Answer 1

尝试：

body { 
    padding-top:50px;
}

.container {
   position: relative;
 }

.aside {
    width: 300px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.content {
    width: 670px
    float: left;
    margin-left: 310px;
}

Answer 2

您应将您置于绝对位置并将高度设置为100％并将容器设置为相对像：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何在容器中<aside>设置高度值100％，高度不是不使用表

2 个答案: