我花了太多时间尝试在类似主题中找到的解决方案，但没有任何效果，我一定是遗漏了一些东西，我在 body 中有一个 div container 和另一个container 中的 div navigation，现在 container 及其子 navigation 都没有拉伸(stretch)到 100%。
这是链接 jsfiddle
HTML
<body>
<div id="header"></div>
<div id="container">
<div class="navigation"></div>
<div id="categ">
<div class="titimmo" style="background-color:#CC3300;">
<a href="#">Immobilier</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
</div>
<div id="categ">
<div class="titauto" style="background-color:#00CC99;">
<a href="#">Automobile</a></div>
<div class="cat-classes"><a href="#">-Annonce</a></div>
</div>
<div id="categ">
<div class="titvehicule" style="background-color:#0099FF;">
<a href="#">Véhicule</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
</div>
<div id="categ">
<div class="titinfo" style="background-color:#993300;">
<a href="#">Informatique</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
</div>
<div id="categ">
<div class="titspares" style="background-color:#9900FF;">
<a href="#">Pièces détachees</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
</div>
<div id="categ">
<div class="titmaison" style="background-color:#6666FF;">
<a href="#">Maison</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
</div>
<div id="categ">
<div class="titmateriaux" style="background-color:#330000;">
<a href="#">Matériaux & Equipement</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
</div>
<div id="categ">
<div class="titmode" style="background-color:#3366FF;">
<a href="#">Accessoires de Mode</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
<div class="cat-classes"><a href="#">Category</a></div>
</div>
</div>
<div id="footer">Copyright <?php echo date("Y");?>, *******.</div>
</body> CSS
html{ height: 101%; margin: 0; padding: 0; min-height:100%;}
body {
height: 100%;
margin:0;
padding:0;
background-color:#0099CC;
min-height:100%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
}
#header {
height:15%;
background-color:#FFFF00;
}
#container {
height:100%;
background-color:#00FF00;
}
.navigation {
margin-left:3%;
margin-right:2%;
width:25%; height:100%;
background-color:#A8A8A8;
float:left;
}
#footer {
clear:both;
width: 100%; padding-top:2%;
background-color:#99CCFF; text-align:center;
color:#080808;
height: 5%;
position:relative;
}
#categ {
width:27%;
background-color:#E8E8E8;
float:left;
margin: 0 5% 3% 3%;
}
.cat-classes a{
color:#000000;
text-decoration:none; display:block;
font-weight:bold;
}
.titimmo, .titauto, .titvehicule, .titinfo, .titspares, .titelectronics, .titmaison, .titloisirs, .titphones, .titvet, .titphoneacces, .titservices, .titmateriaux, .titmode, .titcosmetique, .titvoyage, .titemploi, .titdivers {
text-align:center;
padding:1%;
font-size:16pt;
}
.titimmo .titauto .titvehicule .titinfo .titspares .titelectronics .titmaison .titloisirs .titphones .titvet .titphoneacces .titservices .titmateriaux .titmode .titcosmetique .titvoyage .titemploi .titdivers, a{
color:#FFFFFF; text-decoration:none; display:block;
padding:3%;
font-weight:bold;
}最佳答案
在你的 css 上移除导航的边距。
.navigation {
margin-left:3%; --remove this
margin-right:2%; --remove this
width:25%; height:100%;
background-color:#A8A8A8;
float:left;
}
这就是你要找的吗？如果不能，你能说得更具体吗
关于html - 即使 parent 高度设置为 100%，DIV 及其 child 也不会拉伸(stretch)到 100% 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35877912/