在 HTML 页面底部添加空格

新手上路,请多包涵

我正在尝试创建一个网站,其中标题栏和页脚都位于固定位置,即标题栏始终位于顶部,页脚始终位于底部。

这产生了问题,因为我需要将页面上的内容向上推,以便页脚不会与内容重叠。我需要在内容底部添加一些空间,以便在用户滚动到页面底部时不会发生重叠。我试图将 margin-bottom css 属性添加到最底部的 DIV,以便页面底部应该有一些空间,这适用于最顶部的 DIV 使用 margin-top css 属性但不适用于底部。

这是我网站的主要结构,没有内容:

 <html>
<head>
</head>
<body>
    <div class="CONTAINER">
        <div class="PAGENAVBAR">
        </div>
        <div class='CATEGORYNAVBAR'>
        </div>
        <div class='PAGE_CONTENT'>
            <div class="LEFTCONTAINER">
            </div>

            <div class="RIGHTCONTAINER">
            </div>
        </div>
        <div class="PAGEFOOTER">
        </div>
    </div>
</body>

有人可以建议一种实现这种效果的方法吗?

原文由 Jono_2007 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 399
2 个回答

我发现这很有效:

 body {
    padding-bottom: 50px;
}

原文由 lackita 发布,翻译遵循 CC BY-SA 3.0 许可协议

margin-bottom 移动整个元素,尝试 padding-bottom 代替。

原文由 pjmil 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏