10

ヘッダー/フッター (幅 100%、高さ 145 ピクセル)、ヘッダー/フッターの間の「メイン領域」 (幅 100%、動的な高さ)、およびコンテンツの周りのコンテナーを含む Web ページ レイアウトを作成しようとしています。独自の背景色 (幅 860 ピクセル、高さは動的ですが、常にフッターに対して「フラッシュ」されます)。

(ビジュアルの例を参照してください)

私が抱えている問題は、最小限のコンテンツがある場合、「コンテンツ コンテナー」を常にフッターと同じ高さにすることができないように見えることです。(元の例)のような設定を使用すると、かなりの/「通常の」量のコンテンツがある場合、またはウィンドウのサイズが変更された場合に、フッターがコンテンツの上に浮かびます。

次の CSS では、コンテンツとフッターの間にギャップが生じます。

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

コンテンツが最小限のときにコンテンツコンテナを画面の高さいっぱいにし、フッターをページの下部に「固定」し、通常の量のコンテンツがある場合は動的に適切にサイズ変更するにはどうすればよいですか (フッターは常にコンテンツの一番下にあります)？

ありがとうございました！

4

2 に答える 2

12

フィドル: http://jsfiddle.net/3R6TZ/2/

フィドル出力: http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

アップデート

#content-spacer-topとは#content-spacer-bottom、ボックス サイズが 100% の高さを超えて問題を引き起こすパディングやマージンを使用せずに #content div をパディングするために使用されます。

CSS3 には、この問題を解決できるbox-sizingプロパティ (詳細はこちら) がありますが、CSS3 の機能に依存したくないと想定しています。

編集

修正を追加し、IE7 までテストしました

更新 2

:beforeスペーサー div の代わりに:after疑似要素 を使用する別の方法: http://jsfiddle.net/gBr58/1/

ただし、IE7 または 6 では動作しません。IE8 で動作するには、( w3schools.com<!DOCTYPE>によると) a を宣言する必要がありますが、HTML は適切でクリーンです。

UPDATE 3 (更新が多くてすみません)

IE6まで動作するように更新しました。私の会社はIE6をサポートしていないので、通常は気にしませんが、簡単に修正できました...

于 2013-05-02T00:34:16.313 に答える
0

position: fixed がフッターに必要だと思います:

footer {
    width: 100%;
    height: 30px;
    position:fixed;
    bottom:0;
}
于 2013-05-01T16:55:14.227 に答える