0

このレイアウトの簡単な解決策を見つけようとしています。これは簡略化されたhtmlです。

<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>

ヘッダーとフッターの高さはピクセル単位で固定されています。真ん中は、コンテンツに応じて高さを変えることができます。ラッパーの高さを100％以上にします。したがって、真ん中のテキストが小さい場合は、真ん中のdivを展開してブラウザページ全体に表示する必要があります。また、長すぎる場合は、ページ全体をスクロール可能にする必要があります。

これは簡単に可能ですか？たぶん、レイアウトの何かを変更しますか？

4

1 に答える 1

2

これがあなたの解決策です：http：//jsfiddle.net/S4akv/1/

のハードハイトを設定する必要はありません.middle。コンテンツが数行しかない場合は、何も必要ないスクロールバーが表示されます。

ヘッダーとフッターを使用すると、フッターが押し下げられ、何があってもスクロールバーが強制されるためheight: 100%、クラスに参加したくありません。また.middle、ほとんどのブラウザはこれをブラウザの高さの100％として解釈するため、明確なカットは必要ありません。したがって、ブラウザのサイズを大きくすると、高さが変わらないか、フッターが移動しません。height:100%

ここでの最善の解決策は、ラッパーとそれに関連する背景をアタッチすることです。div内のコンテンツに応じて、.middleこの答えは変わる可能性がありますが、単純なパラメーターを考えると、これが最もエレガントな方法です。

秘訣は、含まれているすべての要素に高さが設定されていることを確認することです。理由は、ブロック要素はheight: 100%それを含む領域の100％にすぎないからです。この場合、ミドル、ラッパー、およびbody, html

body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle {  }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }

ネストされたコンテンツ.middleが100％の高さである必要がある場合は、高さ、絶対位置、および負のマージンの組み合わせを使用するより良い方法があります。猫の皮を剥ぐ方法は無数にあります。まあ、少なくとも一握り:)

.wrapperフッター用のスペースを作るためにパディングを追加するように編集されました。ラッパーの下部のパディングは、フッターと同じ高さである必要があります

于 2012-06-15T23:03:27.173 に答える