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 実身長の内容：わかりません。

一部のページにはコンテンツが少なく、一部のページにはより多くのコンテンツが必要になる場合があるためです。

html、body、wrapper、left-nav、yourad で使用height: 100%; してみましたが、成功しませんでした。

4

2 に答える 2

1

高さ 100% を子要素に適用すると、要素は親要素の高さいっぱいまで伸びます。

たとえば、 #wrapper {height:600px} と #content{height:100%} を設定すると、コンテンツ div の高さが 600px になります。

デフォルトのオーバーフロー プロパティは次のとおりであるため、混乱が生じます。overflow:visible - 要素を含む制約によってクリップされません。したがって、非表示またはスクロールのオーバーフローを明示的に設定しないと、コンテンツはコンテナーの外に流れます。

親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% に設定すると、常に開始時の高さにとどまるため、表示されているボディの下にあるものはすべて切り取られます。

ここでの問題は、ラッパーがパーセントを変換する方法を認識できるように、列の 1 つを固定の高さにする必要があることです。左ナビゲーションの高さが分からないので、javascript をチートして使用し、ラッパーの高さを左ナビゲーションの高さに設定すると、コンテンツ テキストが正しくオーバーフローします。

言葉で十分です、これがあなたがそれをする方法です：

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

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

于 2013-03-14T03:41:56.080 に答える