2

誰かが私のコンテンツブロックの配置を手伝ってくれますか？コンテンツが多い場合は見栄えが良くなりますが、ウィンドウがコンテンツブロックよりも高い場合はそうではありません。実際、私の写真の「コンテンツ」ブロックがすべての空き領域（高さ）を超えている必要があります。そのため、フッターが下部に貼り付けられます。

ここに画像の説明を入力してください

次のHTMLマークアップがあります：

<div>
    <header></header>
    <nav class="breadcrumbing"></nav>
    <section class="left_nav"></section>
    <section class="content"></section>
    <footer></footer>
</div>

このCSSで：

html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}

私はすでにからの答えを試しましたdivの高さを利用可能な領域の100％にすることは可能ですか？といくつかの同じ質問が運がない。また、私のライブHTMLには背景画像があるため、position：absoluteを使用してフッターを一番下に配置することはできません。

そこで、プレビューするHTMLを投稿します：jsfiddle。

UPD：スケーリングされたライブプレビュー： ここに画像の説明を入力してください

4

2 に答える 2

1

htmlandbody heightプロパティを100％に設定する必要があります。footer次に、高さを100％に設定できます。これにより、メインのコンテナ要素に100％の本当の意味がわかり、機能します。

Your updated fiddle

基本的に、これらは追加する必要のあるルールです。

html, body {
    height: 100%;
}

footer {
    height: 100%;
}

アップデート

わかりました、私はあなたの要件を誤解したかもしれません、ここにもっときれいな例があります：

Working example

基本的に、この例で追加で行うことは、ラッパー要素display:tableに。を付けてから、表示をとしてheight: 100%作成することです。footertable-row

重要な注意：このソリューションはdisplay-table、IE8+とのみ互換性のあるものを使用します。IE7のサポートが問題になる場合は、頭から考えられる2つの解決策があります。

  1. 固定幅のフッターを使用し、コンテンツの下に押してから、ネガティブmarginと。の組み合わせで引き戻しpaddingます。

  2. または、JavaScriptを使用してフッターを所定の位置に配置することにより、古いブラウザーのサポートにフォールバックします。

これはコードの内訳です：

HTML

<div class="wrapper">
    <header></header>
    <section class="main-content">
      {child elements of your main-content area}
    </section>
    <footer></footer>
</div>

CSS

html, body { 

  height: 100%;
  margin: 0;

}

.wrapper { 

  display: table;
  margin:  0 auto;
  height:  100%;

}

.main-content { 

  display: table-row;
  height: 100%;

}

footer { 

  display: table-row;

}
于 2013-03-08T14:55:31.257 に答える
1

これが更新されたフィドルです

これの核心は、ボディがビューポートに完全に配置されるように設定することです。そこから、通常どおりにスクロールできるようにする場合は、フッターの位置を固定に変更し、コンテンツdivのCSSを次のように変更します。

body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}

コンテンツdivを別のdivでラップして、ページの中央に自動余白を配置できるようにしました。次に、フッターのボックスのサイズを、追加するパディングを考慮したボーダーボックスとして定義しました。

于 2013-03-08T14:59:26.670 に答える