如何设置滚动高度？

Question

+-------------+      +---------------------------------+
|             |      |                                 |
|     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%;，但未能成功。

Answer 1

高度 100%，当应用于子元素时，将使元素拉伸到其父元素的完整高度。

例如，如果您设置 #wrapper {height:600px} 和 #content{height:100%} 内容 div 现在将具有 600px 的高度。

之所以出现混淆，是因为默认溢出属性是：overflow:visible - will not be clipped by contrainsts of containing element。所以如果不显式设置隐藏或滚动溢出，内容就会流到容器外。

通过在父 div 上设置背景颜色，您可以在示例 (http://jsfiddle.net/RrmK3/) 中看到这一点。

 <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;}

Answer 2

好的，这真的很难用书面形式解释，但我会试一试。

当你将你的身体设置为 100% 时，它会始终保持在它开始时的高度，因此它会切断可见身体下方的任何东西。

这里的问题是你的列之一必须是固定的高度，这样你的包装器才能知道如何翻译百分比。由于您不知道左导航的高度是多少，您可以作弊并使用 javascript 将包装器的高度设置为左导航的高度，并且内容文本将正确溢出..

话不多说，下面是你的做法：

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

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