0

入れ子になった div がたくさんあり、その真ん中にコンテンツがあります。コンテンツを含む div の高さが最も外側の div の最小値になるようにします。

誰かがこれを行うことができましたか？

これが私がやろうとしていることの例です。以下のコードを入れました。の最小高さを#cs#aの高さにしたい。これは緑色のボックスをレンダリングするはずですが、実際には赤色です。

<div id="a">
    <div id="b">
        <div id="c">
            Content here
        </div>
    </div>
</div>

​​#a { height: 100px; }
#b { min-height: 100%; background-color: red}
#c { min-height: 100%; background-color: green}
​

最新のブラウザ以外で動作することについては心配していません。

4

2 に答える 2

0

あなたは近いです：

<div id="a">
    <div id="b">
        <div id="c">
            Content here<br />
            her is more content<br />
            Content here<br />
            her is more content<br />
            Content here<br />
            her is more content<br />
            Content here<br />
            her is more content<br />
            Content here<br />
            her is more content<br />

        </div>
    </div>
</div>

CSS：

#a { height: auto; }
#b { min-height:100%; background-color: red}
#c { min-height:100%; background-color: green;}​

<strong> @gearsdigitalの回答のFIDDLE （再編集）

于 2012-12-12T13:31:49.313 に答える
0

私の理解では、div #a の高さは固定されており、その場合は次のようになります。

このスタイリングを使ってみてください#a

overflow: hidden;

#b と #c に追加

display: inline;

これはあなたのフィドルがどのように見えるかで、テストしたばかりで動作します:

#a { min-height: 100px; overflow:hidden;}
#b { min-height:100%; background-color: red; display:inline;}
#c { min-height:100%; background-color: green; display:inline;}​
于 2012-12-12T13:07:24.540 に答える