Question

我花了太多时间尝试在类似主题中找到的解决方案，没有任何效果，我必须遗漏一些东西，我在container内有一个div body而另一个div navigation在container内，现在container及其子navigation都未达到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;
}

Answer 1

在你的CSS上

删除导航上的边距。

.navigation {
    margin-left:3%;  --remove this
    margin-right:2%;  --remove this
    width:25%; height:100%;
    background-color:#A8A8A8;
    float:left;
}

是你在寻找什么？如果没有，你可以更具体

Answer 2

这是@Kyle Dunne的Example，除了Navigation div之外，效果很好，出于某种原因，它的内容会在div的底部下沉。谢谢你@Kyle Dunne＆amp; @Andrei Gheorghiu。

更新：通过从Navigation div移除float:left;并添加第二个categ div以在下面的两列中保存类别innerContainer2来修复DIV div内容彼此，{{3}}。

即使父母身高设定为100％，DIV及其孩子的身高也不会达到100％

2 个答案: