html - ページ末尾の空白

Question

HTML ページの下部に空白スペースを手動で残すにはどうすればよいですか?

私の内容はdivほとんどpositioned:absolutely入っています。

<br>直前に数回試し</body>ました。動作しませんでした。margin-bottom:2cm;divをつけてみました。動作しませんでした。

Answer 1

絶対配置の div はドキュメント フローの外にあるため、何をしてもページ上の他の要素には影響しないため、margin-bottom同様に失敗します。そのため、できることはdiv、高さのラッピングを100%;使用margin-bottom: 2cm;し、それを使用することです。動作します

html, body {
    height: 100%;
    background: #f50;
}

div { /* Using element selector, you can use ids or classes instead to be specfic*/
    height: 100%;
    margin-bottom: 2cm;
}

デモ

Answer 2

ページに次の CSS を追加します。

body {
    margin-bottom: 50px
}

Answer 3

padding-bottomマージンはコンテンツ間のスペースに使用されるため、パディングは要素内のスペースであるため、代わりに使用してみてくださいmargin-bottom。これにより、探している効果が得られるはずです。

</body>likeの前に空白の div を配置することもでき<div style="height: 200px;"></div>ます。