Question

我这里有我的CSS代码。我的问题是，当内容有很多东西时，它会调整它的高度大于导航的高度。我想要的是当其中一个浮动高度调整它包括另一个时。

<div id="main">   
    <div id="navigation"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

下面的CSS代码：

#main{
    width: 960px;
    height: 500px;
    margin: auto;
}
#navigation{
    float: left;
    width: 200px;
    background-color: #C7E1BA;
}
#content{
    float: right;
    width: 740px;
    background-color: #F6E4CC;
    padding: 10px;
}
#content, #navigation {
    height: 100%;

}
#footer{
    clear: both;
    width: 960px;
    height: 100px;
    background-color: #628B61;
    margin: auto;
}

Answer 1

您可以将#navigation和#content都设置为display: table-cell，然后在两者上删除float。这应该够了吧。如果你想要一个最小高度，你可以在其中一个div上设置它，另一个div也会效仿。这应该适用于all browsers and IE8+。

#navigation{
    width: 200px;
    background-color: #C7E1BA;
}
#content{
    width: 740px;
    background-color: #F6E4CC;
    padding: 10px;
}
#content, #navigation {
    display: table-cell;
}

这是 jsFiddle

Answer 2

试试这个：

#content{
    float: right;
    width: 740px;
    background-color: #F6E4CC;
    padding: 10px;
    display:table;
}

Answer 3

为#navigation添加与#content相同的填充。编辑CSS类如下

#navigation{
    float: left;
    width: 180px;
    background-color: #C7E1BA;
    padding : 10px;
}

Answer 4

FlexBox多么美妙的用例！

#main{
  width: 960px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
#navigation{
  min-height: 400px;
  width: 200px;
  background-color: #C7E1BA;
}
#content{
  width: 760px;
  background-color: #F6E4CC;
}

#footer{
  width: 100%;
  height: 100px;
  background-color: #628B61;
}

<div id="main">   
    <div id="navigation"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

CSS浮动高度自动调整

4 个答案: