0

画面全体の高さを満たしていないページがありますが、フッターを画面のすぐ下に置いて、スクロールを開始したときに、その人の画面の高さに関係なく表示されるようにします。

CSSを使用してこれを達成するにはどうすればよいですか？

編集

私が試してみました：

#footer{
    position:absolute;
    left:0px;
    top:100%;
}

これは機能しますが、ページが画面の高さを超えると邪魔になります。両方のタイプのページの互換性が本当に必要です。

4

3 に答える 3

1 
html {
  min-height: 100%;
}
body {
  min-height: 100%;
  padding-bottom: 40px; /* free space for the footer */
  box-sizing: border-box; /* don't add padding to the actual height */
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
}
于 2012-10-27T20:34:32.360 に答える
1

説明するレイアウトの簡単な例を次に示します。

HTML

<html>
<head><title>Hidden Footer</title></head>
<body>
    <div id="content">
        Content here
    </div>
    <div id="footer">
        Footer here
    </div>
</body>
</html>

CSS

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

#content { min-height: 100%; }
#footer { background: #ccc; }
于 2012-10-27T20:35:25.977 に答える
0

リンクしたページのヘッダーは固定されています。体の残りの部分は適切にスクロールします。

固定されたCSSヘッダー/フッターを調べて、効果を再現します。

于 2012-10-27T20:30:29.263 に答える