在 HTML 页面底部添加空格

Posted 2023-02-24

技术标签:

【中文标题】在 HTML 页面底部添加空格【英文标题】：Adding whitespace at bottom of HTML page 【发布时间】：2012-05-30 11:15:47 【问题描述】：

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

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

这是我网站的主要结构，没有内容：

<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>

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

【问题讨论】：

【参考方案1】：

我发现这很有效：

body 
    padding-bottom: 50px;

【讨论】：

我最近在我的提要上看到了这个弹出窗口，回顾我的天真的日子，我相信使用 padding-bottom 是更好的选择【参考方案2】：

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

【讨论】：

你能解释一下margin-和padding-bottom之间的区别吗？他们看起来和我很像？【参考方案3】：

将 padding-bottom 添加到最后一个元素应该这样做，或者您可以将 padding-bottom 添加到容器元素，请记住，如果您在 css 中设置了它，它将添加到高度

【讨论】：

我尝试将填充添加到容器元素，但由于某种原因它根本没有效果，不知道为什么作为您回答九年后的评论，我想补充一点，您的回答更有意义，因为“将填充底部添加到正文”的评价更高。在垂直居中的元素中，例如在容器中使用 css 网格，您将在屏幕底部有空间，在不适合某些屏幕的页面上的内部元素上使用 padding-bottom，而 body padding-bottom 将“居中”并且最后一个元素将停留在浏览器底部。【参考方案4】：

使用段落来做到这一点。 html paragraph

【讨论】：

谢谢，我之前也尝试过这种策略，但是我将文本留空，只要在

字段中添加一些字符，就达到了我想要的效果。

虽然这是解决此问题的一种方法，但这不是正确的方法。请参阅@pjmil116 的回答。【参考方案5】：

尝试改用“padding-bottom”。与“margin-bottom”相比，这种行为在不同浏览器中的行为更加一致。

但请注意，如果您在任何计算中使用它，这将增加相关元素的整体高度。

【讨论】：

【参考方案6】：

我会给PAGE_CONTENT 一个margin-bottom；如果您的LEFTCONTAINER 和RIGHT_CONTAINER 是浮动的，您可能还需要给它overflow:hidden。

【讨论】：

【参考方案7】：