4

これが次の質問に対する私のjsFiddleです：http：//jsfiddle.net/arelia/Rruxf/

体の一番上にあるヘッダーと、体の一番下にあるフッターが欲しいのですが。ヘッダーとフッターの間にコンテンツdiv（位置：相対）があり、divの周囲にマージンを設定すると、絶対位置のヘッダーとフッターがそのマージンの高さだけ上下の位置から移動します（これは私がdivの段落の上下にマージンを設定してみました）。フィドルでは、フッターが完全に配置されていても、フッターが下部にアタッチされていないことがわかります（静的に意図した結果が得られるため、先に進んでヘッダーを静的にしました）。ヘッダーとフッターを本体の上部と下部に配置し、中央のコンテンツでこれら2つの要素を移動させないようにするにはどうすればよいですか？位置：絶対要素がフローから移動した場合、なぜ何かがそれらの位置に影響を与えるのでしょうか？

私はこことグーグルで「CSSマージンは絶対に影響を与える」と他のいくつかのフレーズを検索してみましたが無駄です。開発者ツールでもう少し遊んでいるときに、これを発見しました。

  • メトリックは、本文がhtml要素の高さから1つのマージン（フッターに影響を与えているマージン）を引いたものであることを示しています。したがって、本文はコンテンツdivの高さまで伸びている必要があります。これは、本文内のドキュメントフロー内に、その高さを定義するものが他にないためです。ただし、その高さは、マージンの後ではなく、コンテンツが終了する場所で終了します。マージンを含めるべきではありませんか？
  • ボディの高さを100％にすると、フッターはビューポートの下部に配置され、スクロールしてもその場所に固定されたままになります。ビューポートの下部ではなく、ボディの下部にアタッチされないのはなぜですか？
4

2 に答える 2

2

最後の2つの質問に答える

  • 「しかし、その高さは、マージンの後ではなく、コンテンツが終了するところで終了します。マージンを含めるべきではありませんか？」回答：いいえ、body高さ自体は、その中の要素の下マージンの影響を受けません。
  • 「ボディの高さを100％にすると...ビューポートの下部ではなく、ボディの下部にアタッチされないのはなぜですか？」回答：高さを設定することにより、ビューポートの高さに設定したため、下部に取り付けられています。body100%body

主な質問に逆の順序で答える

  • 「位置：絶対要素がフローから移動した場合、なぜ何かがそれらの位置に影響を与えるのでしょうか？」回答：それらの位置に影響を与えるのは、そのボディ要素の位置です。上記の最初の質問に答える際に、内側の要素のマージンにより、内部の要素がビューポートの下部から遠ざかり、ビューポートの下部からその距離だけギャップbodyが生じる可能性があります。body次に、要素をに配置するbodyと、ボディがビューポートの下部と同じ高さにならないため、要素がギャップされます。これは、フィドルのフッター領域に表示されているものです。
  • 「ヘッダーとフッターを本体の上部と下部に配置し、中央のコンテンツでこれら2つの要素を移動させないようにするにはどうすればよいですか？」回答：アダムの最初の回答はfixed、あなたの太字の質問に厳密に基づいた1つの方法です（彼はそれ以降それを修正しました）。ただし、コメントで、「コンテンツが短い場合はビューポートの下部にフッターが必要です。コンテンツが長い場合はコンテンツをフォローして、の左下隅と右下隅をタッチするようにします。ページ。" アダムのfixedポジショニングの最初の答えはそれを達成しません（彼も気づいたように）。それよりも：

これを行う

html {height: 100%}
body {min-height: 100%;}

div {
    margin: 20px 20px 0 20px; /* eliminate your bottom margin */
    padding-bottom: 50px; /* use bottom padding to get space for footer */
}

短いコンテンツのフィドルを参照してください。

長いコンテンツのフィドルを参照してください。

于 2012-07-06T03:11:52.370 に答える
1

あなたのコメントを見て、私はあなたが達成しようとしていることを理解していると思います。あなたはこれを使うことができます：

http://ryanfait.com/sticky-footer/

これを既存のコードと統合する方法は次のとおりです。

http://jsfiddle.net/wJSZD/

于 2012-07-06T02:37:27.197 に答える