我已經花了太多時間試圖解決我對類似的題目發現,沒有什麼工作,我一定是失去了一些東西,我有一個div container
在body
和另一個DIV navigation
的container
裏面,現在裏面都container
及其子navigation
不拉伸至100%。
這裏的鏈接jsfiddleDIV及其子都沒有拉伸至100%的高度,甚至與家長的高度設置爲100%
HTML
<body>
<div id="header"></div>
<div id="container">
\t <div class="navigation"></div>
\t <div id="categ">
\t \t \t <div class="titimmo" style="background-color:#CC3300;">
<a href="#">Immobilier</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t </div>
\t
\t <div id="categ">
\t \t \t <div class="titauto" style="background-color:#00CC99;">
<a href="#">Automobile</a></div>
\t \t \t <div class="cat-classes"><a href="#">-Annonce</a></div>
\t \t </div>
\t
\t <div id="categ">
\t \t \t <div class="titvehicule" style="background-color:#0099FF;">
<a href="#">Véhicule</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t </div>
\t <div id="categ">
\t \t \t <div class="titinfo" style="background-color:#993300;">
<a href="#">Informatique</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t </div>
\t
\t <div id="categ">
\t \t \t <div class="titspares" style="background-color:#9900FF;">
<a href="#">Pièces détachees</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t </div>
<div id="categ">
\t \t \t <div class="titmaison" style="background-color:#6666FF;">
<a href="#">Maison</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
</div>
<div id="categ">
\t \t \t <div class="titmateriaux" style="background-color:#330000;">
<a href="#">Matériaux & Equipement</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t </div>
<div id="categ">
\t \t \t <div class="titmode" style="background-color:#3366FF;">
<a href="#">Accessoires de Mode</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t \t \t <div class="cat-classes"><a href="#">Category</a></div>
\t </div>
\t
\t </div>
\t
\t <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 {
\t height:15%;
\t background-color:#FFFF00;
}
#container {
\t height:100%;
\t background-color:#00FF00;
}
.navigation {
\t margin-left:3%;
\t margin-right:2%;
\t width:25%; height:100%;
\t background-color:#A8A8A8;
\t float:left;
}
#footer {
\t clear:both;
\t width: 100%; padding-top:2%;
\t background-color:#99CCFF; text-align:center;
\t color:#080808;
\t height: 5%;
position:relative;
}
#categ {
\t width:27%;
\t background-color:#E8E8E8;
\t float:left;
\t margin: 0 5% 3% 3%;
}
.cat-classes a{
\t color:#000000;
\t text-decoration:none; display:block;
\t font-weight:bold;
}
.titimmo, .titauto, .titvehicule, .titinfo, .titspares, .titelectronics, .titmaison, .titloisirs, .titphones, .titvet, .titphoneacces, .titservices, .titmateriaux, .titmode, .titcosmetique, .titvoyage, .titemploi, .titdivers {
\t text-align:center;
\t padding:1%;
\t font-size:16pt;
}
.titimmo .titauto .titvehicule .titinfo .titspares .titelectronics .titmaison .titloisirs .titphones .titvet .titphoneacces .titservices .titmateriaux .titmode .titcosmetique .titvoyage .titemploi .titdivers, a{
\t color:#FFFFFF; text-decoration:none; display:block;
\t padding:3%;
\t font-weight:bold;
}
從你的孩子取出'margin's,他們會伸展。 –
100%你想要什麼? #container div與窗口一樣高,這就是css所說的。 –
目前還不清楚你在問什麼。爲[這裏](https://jsfiddle.net/websiter/LL0f20L6/3/)你想要什麼? –