Question

我正在制作一个带有“page”div的网站，里面包含左边的div“navigation”和右边的div“content”。我想让“page”div的高度（所以背景匹配）等于最高div的高度，“navigation”或“content”。

我将如何做到这一点？

Answer 1

像这样写

HTML：

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

的CSS：

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

Answer 2

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

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

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

父div用于匹配最高的孩子div的高度？

3 个答案: