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

****笔记： ****

首先看我的演示以了解我的问题在这里

1实际身高的内容：我不知道。

2实际身高的内容：我不知道。

3 实际身高的内容：我不知道。

因为我可能需要一些页面更少的内容和一些页面更多的内容。

我尝试过height: 100%; 在 html、body、wrapper、left-nav、yourad 中使用，但没有成功。

4

2 回答 2

1

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

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

出现混淆是因为默认的溢出属性是：溢出：可见 - 不会被包含元素的约束剪裁。因此，如果不明确设置隐藏或滚动溢出，内容将流到容器外。

通过在父 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;}
于 2013-03-14T03:36:57.900 回答
0

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

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

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

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

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

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

于 2013-03-14T03:41:56.080 回答