如何設置滾動高度？

+-------------+  +---------------------------------+ 
|    |  |         | 
|  1  |  |         | 
| left-nav |  |         | 
|    |  |         | 
+-------------+  |    3     | 
|    |  |         | 
|    |  |         | 
|  2  |  | very long contents here   | 
|    |  | which causes to scroll   | 
| other  |  | vertical bar. Setting   | 
| remaining |  | this content to 100% height? | 
+-------------+  +---------------------------------+

什麼是身高：100％;其實？它應用於頁面窗口還是滾動結束？我有以下的HTML ...如何設置滾動高度？

<div id="wrapper"> 
<div id="left-nav"> 
<!--contents of 1--> 
</div> 
<div id="yourad"> 
<!--contents of 2---> 
</div> 
<div id="main-contents"> 
<!--contents of 3--> 
</div> 
</div>

我的CSS如下....

#wrapper{position: relative; width: 1007px; margin: 0 auto;} 
#left-nav{width: 329px; height: 100%; background: grey;float: left;} 
#yourad{height: 100%; background: blue;} 
#main-contents{margin-left: 329px; padding: 10px; background: pink;}

****注：****

第一眼看到我的演示，以瞭解我的問題Here

1實際高度的內容我不知道。

2實際高度的內容：我不知道。

3實際高度的內容：我不知道。

因爲我可能需要一些頁面少一些內容和一些頁面更多的內容。

我試過在html，body，wrapper，left-nav，yourad中使用height: 100%;，但是無法成功。

來源

2013-03-14 Bhojendra Nepal

你有沒有試着用'溢出玩：隱藏;'和'溢出-Y：scroll'？ – slamborne 2013-03-14 02:46:14

溢出：隱藏;我用過，但溢出 - Y：滾動，我不知道這件事。 – 2013-03-14 02:53:59

這是你所追求的嗎？ http://jsfiddle.net/Y7PhV/105/ – slamborne 2013-03-14 02:58:00

當應用於子元素時，高度爲100％將使元素伸展到其父元素的整個高度。例如，如果將#wrapper {height：600px}和#content {height：100％}設置爲內容div，則其高度將爲600px。

由於默認溢出屬性爲overflow:visible - will not be clipped by contrainsts of containing element，所以出現混淆。因此，如果不明確地設置隱藏或滾動溢出，內容將流出容器。

您可以在您的示例（http://jsfiddle.net/RrmK3/）中通過在父div上設置背景色來看到這一點。

<div id="wrapper" class="wrap"> 
    <div id="left-nav"> 
     <h4>Menu Title</h4> 
     <ul> 
      <li><a href="#">Menu Item</a></li> 
     </ul>   
     <div id="yourad"> 
      You add is in your sidebar. It is not in your question :) 
     </div> 
    </div> 
    <div id="contents"> 
     <h1>Indenting Code Keeps you Sane.</h1> 
    </div> 
</div> 

#contents{ margin-left: 330px; margin-top: 5px; height:100%; } 
#wrapper{position: relative; width: 1007px; margin: 0 auto; height:200px; background:pink;}

來源

2013-03-14 03:36:57 happilyUnStuck

好的，這是很難解釋的書面，但我會給它一個鏡頭。

當你將你的身體設置爲100％時，它將始終保持在它開始的高度，因此它將切斷可見物體下面的任何東西。

這裏的問題是，你的一個列必須是固定的高度，所以你的包裝可以知道如何翻譯百分比。既然你不知道left-nav的高度是多少，你可以作弊和使用javascript來設置你的包裝的高度，以你的左導航的高度和內容文本將正確溢出..

足夠的也就是說，這裏是你如何做到這一點：

$('#wrapper').height($('#left-nav').height());

http://jsfiddle.net/Y7PhV/106/

來源

2013-03-14 03:41:56 slamborne

如何設置滾動高度？

回答

相關問題