Question

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

这产生了一个问题，我需要向上推送页面上的内容，以便页面页脚不会与内容重叠。我需要在内容的底部添加一些空格，以便在用户滚动到页面底部时不会发生重叠。我试图在最底部的DIV中添加margin-bottom css属性，以便在页面底部添加一些空格，这适用于使用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>

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

Answer 1

我发现这是有效的：

body {
    padding-bottom: 50px;
}

Answer 2

margin-bottom移动整个元素，尝试填充底部。

Answer 3

使用段落来执行此操作。 html paragraph

Answer 4

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

Answer 5

尝试使用'padding-bottom'代替。这种行为在不同的浏览器中比“margin-bottom”更加一致。

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

Answer 6

我要PAGE_CONTENT一个margin-bottom;如果overflow:hidden和LEFTCONTAINER已浮动，您可能还需要提供RIGHT_CONTAINER。

在HTML页面底部添加空格

6 个答案: