2016-03-08 67 views
0

我已經花了太多時間試圖解決我對類似的題目發現,沒有什麼工作,我一定是失去了一些東西,我有一個div containerbody和另一個DIV navigationcontainer裏面,現在裏面都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; 
 
}

+0

從你的孩子取出'margin's,他們會伸展。 –

+0

100%你想要什麼? #container div與窗口一樣高,這就是css所說的。 –

+0

目前還不清楚你在問什麼。爲[這裏](https://jsfiddle.net/websiter/LL0f20L6/3/)你想要什麼? –

回答

0

在您的CSS刪除導航邊距。

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

是你在找什麼?如果沒有,你可以更具體

+0

我需要綠色和灰色的div伸展下來,它們是100%的高度,但它們只是頁面的一半。我想#container的DIV和#navigation div來達到頁腳 – Samwise

+0

@Andrei是正確的。看看他的答案 – acardoso

0

這裏有一個Fix通過@Kyle鄧恩,它工作得很好,除了Navigation DIV,由於某種原因,其內容宿在div的底部。
感謝您@Kyle鄧恩& @Andrei喬治烏。

UPDATE:通過從categ DIV除去float:left;固定Navigation DIV下沉內容和添加的第二innerContainer2 div來保持類別DIV S IN兩列彼此相鄰,Example