1

たくさんの質問や記事を読みましたが、これを理解できないようです。

これが私のレイアウト構造の大まかな例です：

body  
- div 1 (header)  
- div 2 (main content wrapper)  
- - div 2a  
- - - div 2a1  
- - - div 2a2  
- - - - div 2a2a (this div needs to fit 100% height of it's parent - div 2a2)  
- - - div 2a3  
- - div 2b  
- div 3 (footer)

私の主な問題は、2aのすべての子要素が左に浮いているという事実に起因すると思います。

私が見つけたすべての答えは、htmlタグとbodyタグを含め、親コンテナーの高さを100％追加することについて話します。しかし、私はただ通り抜けて高さを追加することはできません：100％; それは私のレイアウトを壊してしまうので、すべての昇順の親に。具体的には、メインコンテンツラッパーであるdiv 2に高さを100％追加すると、

これが私の問題をよく表す私が作ったjsfiddleです。

4

2 に答える 2

7

パーセンテージの高さは親要素から計算されますが、ピクセルの高さはそうではありません。つまり、すべての高さをパーセンテージにする必要がある場合にのみ、各レベルで高さを設定する必要があります。ピクセル値で
設定できるため、それよりも小さくなることはありませんが、その値を超えて拡大することはできます。そして、あなたは着手しました。親要素 (2a2) には px の絶対値があるため、これは機能します。 編集: コンテンツに関係なく、3 つの div がコンテナーの残りの部分を埋めるようにするには、padding-bottom、margin-bottomトリックを使用する必要があります。これがcodepenです。min-height2a2height: 100%2a2a


于 2013-01-04T21:25:46.417 に答える
1

とを設定するだけ2a2です。その後、追加すると、親の高さいっぱいまで引き伸ばされます。position: relative2a2aposition: absolutetop: 0; bottom: 0;2a2a

jsFiddle は常に役に立ちます: http://jsfiddle.net/REh4b/

于 2013-01-04T21:25:08.483 に答える