4

ページに 300 ピクセル程度のコンテンツがあまりない場合、フッターは解像度 1024 でページの中央に表示されます。

フッターの高さを知らずにフッターをページの下部に表示するにはどうすればよいですか?

私はこの解決策を試しました：

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

padding-bottom: (footerheight);しかし問題は、#footer の前に要素を追加する必要があることです。フッターの高さはページによって可変なので、これは不可能です...

4

2 に答える 2

2

コンテンツ領域でmin-heightを使用してみませんか。コンテンツが300pxしかない場合にmin-heightを600pxに設定すると、フッターがさらに300px下にパディングされ、画面の中央に表示されなくなります。

于 2011-01-24T14:29:34.047 に答える
0

これを回避することはできませんが、トリックがあります。本文の背景をフッターの背景と同じにしてから、コンテナ内の他のすべてのコンテンツを本文の上に置きます。

これにより、75px のフッターが作成されます。関連するコンテナ div の -75px マージンに注意してください。

html {
  height:100%;
  padding:0px;
  margin:0px;
}
body {
    height:95%;
    padding:0px;
    margin:0px;
    background-color:#1C303C;
}

footer {
    background-color:#1C303C;
    color:#FFFFA3;
    display:block;
    position:absolute;
    width:100%;
    min-height:75px;
    height:75px;
    margin:0px;
    padding:0px;
    left:0px;

}

#container {
    background-color:#FFFFFF;
    min-height:100%;
    height:100%;
    width:100%;
    top:0;
    left:0;
    margin: 0;
    padding:0;
    margin-bottom:-75px;
}

関連する HTML は次のとおりです。

<body>
    <div id="container">
    </div>
    <footer>
    </footer>
</body>
于 2013-12-28T05:24:55.573 に答える