2 
+----------------------+
|          1           |
|                      |
+----------------------+
|       |              |
|   2   |              |
|       |              |
|       |      4       |
+-------|              |
|    3  |              |
|       |              |
+----------------------+

上記のように、（1）ヘッダーのコンテンツを追加する必要があります。（2）左側のナビゲーション、（3）2から3の中央までのコンテンツがありますが、4、（4）コンテンツが大きいため、高さがわかりません。したがって、指定する必要がありますheight: 100%;が、機能しません。実行する方法？

編集

<div id="wrap">
<!--contents of (1)--> 
</div>
<div id="wrap">
<div id="left-nav">
<!--contents of (2)-->
<div id="someid">
<!-contents of (3)-->
</div>
</div>
<div id="main">
<!--contents of (4)-->
</div>
</div>

main css背景（2）と（3）を同じ、（4）の背景を変えたい。

#left-nav{width: 200px; background-color: red; height: 100%;}

このリンクをチェックしてください赤い境界線のある赤いテキストは私が与えたいものですheight: 100%;

4

4 に答える 4

1

質問全体を見るのはいいことです:)

デモ：JSFiddle

動的コンテンツがあり、ページの高さがわからない場合は、プロパティを設定しないでくださいheight。高さが親（またはウィンドウ）の高さを基準にして設定されるためです。繰り返しになりますが、サイズを動的にする必要があります。したがって、heightプロパティを設定しないでください。

質問は次のように言い換えることができると思います。

Q： CSSだけで動的領域を同じ高さにするにはどうすればよいですか？

簡単に言えば、できません。ただし、同じ高さであるように見せることはできます。

これは純粋なCSS実装であり、IE8ではおそらく正しく見えないでしょう。@Adamの答えを拡張します。

  1. サイドバー要素を新しいdiv（#sidebar）でラップし、もう一度、float: left。

  2. を設定すると、より高くなった場合に備えて拡張#wrap { overflow: auto }できるようになります。（ソース）#wrap#sidebar#main

  3. セット#sidebar { width: X }して#main { padding-right: X }。これにより、の背景#mainが占める左側の領域が尊重されます。#sidebar

  4. #sidebar最後の部分は、との背景を設定すること#mainです。これを行うには、 2つの背景画像を設定します#wrap { background: url('image1') repeat-y, url('image2') X 0 }。ここで、Xはサイドバーの幅です。画像がサイドバーと同じ幅であることを確認し、y方向にのみ繰り返します。2番目の画像はサイドバーの右側にオフセットされ、残り#wrapの背景を埋めるために並べて表示されます。

高さも設定されてい#sidebarない#mainため、コンテンツが大きくなるにつれて自由に拡張できます。#wrapフロートの高さまで拡張するように固定しましたが、通常のブロック要素であるため、通常は#sidebarの高さまで拡張します。#main背景がに設定されているため、#wrap両方の子が親と同じ高さであるように見えます。

HTML （追加#sidebar）

<div id="header">1</div>
<div id="wrap">
    <div id="sidebar">
        <div id="left-nav">2</div>
        <div id="someid">3</div>
    </div>
    <div id="content">4</div>
</div>

CSS

注：複数の画像は機能しません<IE8。色をに設定することはできますが、高さが。よりも高い場合の#main高さまで拡張されません。#wrap#sidebar#main

#wrap {
    background: url('image1') repeat-y, 
                url('image2') X 0;
    overflow: auto;
}
#sidebar {
    float: left;
    width: X;
}

#main {
    margin-left: X;
}
于 2013-03-15T13:30:31.773 に答える
0

両方の列を同じ高さにするには、equalizeCols（jQueryプラグイン）を使用する必要があります

-また-

コンテナdivで3と4をラップし、コンテンツの高さ全体でyを繰り返すことができる左側に異なる色/パターンの背景画像を与えることにより、左側のバーの外観をシミュレートします。わかる？

于 2013-03-14T03:31:54.587 に答える
0

私はこの方法で私の問題を解決しました.....

#left-nav{position: absolute; width: 329px; height: 100%;}
#someid{height: 70%; bottom: 0;}

しかし、それでも適切な解決策が推奨されます。

于 2013-03-14T03:06:22.920 に答える
0

何かを100％に設定すると、それは親要素の100％になります。では、親要素の高さはどれくらいですか？それが何らかの値に設定されていない場合、期待したものが得られない可能性があります。親が100％に設定されている場合は、「100％何に設定されていますか？親は何に設定されていますか？」と自問してください。ビューポートとhtml要素のサイズのみである可能性のある価値のあるものに到達するまで、パーセントはサイズを提供しません。

于 2013-03-12T11:45:26.837 に答える