父 div 匹配最高子 div 的高度？答案

【问题标题】：Parent div to match tallest child div's height?父 div 匹配最高子 div 的高度？
【发布时间】：2011-11-28 21:55:09
【问题描述】：

我正在制作一个带有“页面”div 的网站，其中包含左侧 div“导航”和右侧 div“内容”。我想让“页面”div的高度（因此背景匹配）等于最高div的高度，“导航”或“内容”。

我该怎么做呢？

【问题讨论】：

标签： css html web height

【解决方案1】：

这样写

html:

<div class="page">
 <div class="navigation"></div>
 <div class="content"></div>
</div>

css:

page{overflow:hidden}
.navigation, content{float:left}

【讨论】：

好吧，添加 style='overflow: hidden' 可以添加到“页面”div。感谢 mu 太短了，但你还是写了“overflow:hidden”，所以是的。我会给你一个赞成票，但是如果 mu 发布一个答案来补充他的评论，我会保留最佳答案。
@Keavon：欢迎您接受桑迪普，别担心。

【解决方案2】：

我猜你正在浮动其他 div，否则情况总是如此。您也可以浮动父 div，或者在父 div 的末尾添加 <div style='clear: both'></div>。这些技术中的任何一种都会导致父 div 与其子 div 一样大。

编辑：哎呀，错过了结束标签:)

【讨论】：

或overflow: hidden在“页面”div上。
好的，原来的 style='clear : both' 不起作用，我没有尝试做另一个选项，但是，谢谢你 mu 太短了，你的小费奏效了！谢谢！太糟糕了，你没有发布答案（你现在可以做吗？）我不能给你最好的答案，但你明白了！谢谢！！！
@Keavon：你应该把<div style='clear: both'></div>放在“page”div的底部，这应该和overflow: hidden一样的视觉效果。

【解决方案3】：

这对你有帮助

HTML

<div class="page">
  <div class="navigation">i am navigation</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est maiores, ex? Mollitia assumenda veniam aliquid commodi ex, libero in quia perspiciatis sint voluptatibus soluta exercitationem quas quos repudiandae deserunt obcaecati.</div>
</div>

CSS

 .page {
  background-color: #000;
 }
 /* for clearfix*/
.page:after{
    content: "";
    display: table;
    clear: both;   
 }
 /* for clearfix end*/

 .navigation,.content {
   float: left;
 }
 .navigation {
   width: 20%;
   background-color: #cd6a51;
 }
 .content {
   width: 80%;
   background-color: #4CAF50;
 }

【讨论】：