如何设置滚动高度？

+-------------+  +---------------------------------+ 
|    |  |         | 
|  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

如何设置滚动高度？

回答

相关问题