1

我这里有我的 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;
}
4

4 回答 4

5

您可以同时设置#navigationand #contenttodisplay: table-cell然后去掉float它们上的 's。这应该够了吧。如果你想要一个最小高度，你可以将它设置在其中一个上，div另一个div也会效仿。这应该适用于所有浏览器和 IE8+。

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

这是一个jsFiddle

于 2013-07-17T01:55:51.353 回答
0

试试这个 ：

#content{
    float: right;
    width: 740px;
    background-color: #F6E4CC;
    padding: 10px;
    display:table;
}
于 2013-07-17T01:31:49.543 回答
0

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

#navigation{
    float: left;
    width: 180px;
    background-color: #C7E1BA;
    padding : 10px;
}
于 2013-07-17T01:32:43.673 回答
0

多么漂亮的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>

于 2017-10-26T19:48:44.960 回答