我有一个示例页面，如下所示
<div class="container">
<div class="header floatL width100p">
<h2>
Header
</h2>
</div>
<div class="content floatL width100p">
<div class="floatL width29p npv">
<p>navigation div</p>
</div>
<div class="floatL width70p rtb">
<div class="floatL width100p ql">
<p>
div one
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width100p mtbs">
<p>
div two
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width100p widdiv">
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer floatL width100p">
<h2>
Footer
</h2>
</div>
<div class="clear"></div>
</div>
*,html{
margin: 0;
padding: 0;
}
.container{
width:960px;
margin:20px auto;
}
.header h2,.footer h2{
text-align: center;
}
.floatL{
float: left;
}
.floatR{
float: right;
}
.clear{
clear:both;
}
.width100p{
width: 100%;
}
.width29p{
width: 29%;
}
.width70p{
width: 70.8%;
}
.header,.footer,.content{
border:1px solid;
}
.npv{
border-right: 1px solid;
height: 100%;
}
.ql,.mtbs{
border-bottom: 1px solid;
}
.width40p{
width: 40%;
}
.incont{
margin: 4%;
background: #ccc;
border:1px solid red;
}
我想知道为什么左导航div不能占据100％的高度，如通过运行上面的代码可以看到的那样。
任何帮助，将不胜感激。迫在眉睫...
使用 css tables
.content
{
display: table;
height: 100%;
}
.npv, .rtb
{
display: table-cell;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句