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，因此引起混淆。因此，如果没有明确设置隐藏或滚动溢出，内容将流出容器。

您可以在示例（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;}

Answer 2

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

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

这里的问题是你的一个列必须是一个固定的高度，所以你的包装器可以知道如何转换百分比。由于你不知道左导航的高度是什么，你可以欺骗并使用javascript将你的包装器的高度设置为左导航的高度，内容文本将正确溢出..

足够的话，这是你如何做到的：

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

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

如何设置滚动高度？

2 个答案: