在HTML页面底部添加空白_Html_Css

在HTML页面底部添加空白

html css

在HTML页面底部添加空白,html,css,Html,Css,我正试图创建一个网站，我有两个标题栏和页脚在固定的位置，即标题栏总是顶部和页脚总是底部这就产生了一个问题，我需要将页面上的内容向上推，这样页脚就不会与内容重叠。我需要在内容的底部添加一些空间，这样当用户滚动到页面底部时就不会出现重叠。我曾尝试将margin-bottomcss属性添加到最底部的DIV，以便在页面底部添加一些空间，这对使用margin-topcss属性的最顶部DIV有效，但对底部无效这是我的网站的主要结构，没有内容： <html> <head> &l

我正试图创建一个网站，我有两个标题栏和页脚在固定的位置，即标题栏总是顶部和页脚总是底部

这就产生了一个问题，我需要将页面上的内容向上推，这样页脚就不会与内容重叠。我需要在内容的底部添加一些空间，这样当用户滚动到页面底部时就不会出现重叠。我曾尝试将

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>

有人能建议一种方法来达到这个效果吗？

用段落来完成

边距底部移动整个元素，请尝试使用padding bottom。

将padding bottom添加到最后一个元素应该可以做到这一点，或者您可以将padding bottom添加到container元素，但请记住，如果您在css中设置了高度，则会将其添加到高度中。

尝试使用“padding bottom”。这种行为在不同浏览器中比“边距底部”更为一致

但请注意，如果在任何计算中使用这一点，这将增加所讨论元素的总体高度。

我会给

页面内容

一个

页边距底部

；如果您的

LEFTCONTAINER

和

RIGHT\u CONTAINER

处于浮动状态，您可能还需要将其设置为

overflow:hidden

。

我发现这是有效的：

body {
    padding-bottom: 50px;
}

我曾尝试将填充添加到容器元素中，但由于某些原因，它根本没有效果，不知道为什么在您回答九年后的评论中，我想补充一点，您的回答更有意义，因为评级更高的“将填充底部添加到主体”。在垂直居中的元素中，例如容器中的css网格，在不适合某些屏幕的页面上，屏幕底部有一个填充底部的内部元素，而正文填充底部将“居中”，最后一个元素将粘在浏览器底部。谢谢，我以前确实尝试过这种策略，但我将文本留空，只要我在字段中添加了一些字符，就达到了我想要的效果。虽然这是解决此问题的一种方法，但这不是正确的方法。请参阅@pjmil116的答案。我最近在我的提要上看到了这个弹出窗口，回顾我天真的日子，我相信使用填充底部是更好的选择。请解释边距和填充底部之间的差异。他们看起来很像我？