高度不會達到100％

我有兩個部分，左側的結果和右側的主要部分駐留在html> wrapper>容器中。高度不會達到100％

現在，這兩個高度都不是固定的，並希望它們根據其內容伸展到100％。在某些情況下，結果比主要更長，反之亦然。我已經使用了100％的高度，但它似乎並不奏效。請幫忙！

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
} 

#wrapper { 
min-height: 100%; 
position: relative; 
width: 100%; 
} 

#container { 
width: 1007px; 
padding: 130px 0 0 0; 
display: block; 
} 

.results { 
width: 383px; 
float: left; 
background: 
#fff; 
display: block; 
-webkit-box-shadow: -2px 0px 8px -6px #000; 
-moz-box-shadow: -2px 0px 8px -6px #000; 
box-shadow: -2px 0px 8px -6px #000; 
padding-bottom: 60px; 
} 

.main { 
width: 606px; 
float: left; 
padding: 15px 0 0 16px; 
position: relative; 
background: url(images/pattern.png) repeat; 
height: 100%; 
bottom: 0px; 
} 

<html lang="en> 
    <head></head> 
    <body> 
    <div id="wrapper"> 
     <div id="container" class="clear fix"> 
      <section class="results"> 
      </section> 
      <section class="main"> 
      </section> 
     </div> 
    </div> 
    </body> 
    </html>

來源

2013-04-09 user1038814

也發佈您的HTML。 – dfsq 2013-04-09 17:46:43

所以你想要兩列是相同的大小？如果是這樣，嘗試添加'overflow：auto'到'＃Wrapper' – Justin 2013-04-09 17:47:33

嘗試在位置屬性中使用「絕對」而不是「相對」。我在這裏工作過。

例如：

.main { 
width: 606px; 
float: left; 
padding: 15px 0 0 16px; 
position: absolute; 
background: url(images/pattern.png) repeat; 
height: 100%; 
bottom: 0px; 
}

擁抱，維尼。

來源

2013-04-09 17:54:59

嗨Vinicus，謝謝，但如果我這樣做，主要部分位於結果部分頂部:( – user1038814 2013-04-09 17:57:01

說實話，我不知道如果存在以這種方式「強制」高度屬性的方法，爲什麼你可以做100％的div？試試看你的頁面設計，以便更好地適應元素，所以，祝你好運。 – 2013-04-09 18:40:55

在許多情況下，如果您指出身高應爲100％，但您需要提出「100％是什麼？」這個問題，就會出現問題。答案是該元素的父母，因此下一個問題是「父母的身高設置爲多少？」。如果你沒有設置父母的身高，那麼100％沒有任何東西。

來源

2013-04-09 17:57:21 Rob

高度不會達到100％

回答

相關問題