16

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

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

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

4

7 回答 7

32

我发现这很有效：

body {
    padding-bottom: 50px;
}
于 2014-04-17T23:36:50.260 回答
9

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

于 2012-05-30T11:20:27.740 回答
2

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

于 2012-05-30T11:20:47.900 回答
1

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

于 2012-05-30T11:17:50.867 回答
0

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

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

于 2012-05-30T11:21:35.950 回答
0

我会给PAGE_CONTENT一个margin-bottom；overflow:hidden如果您的LEFTCONTAINERandRIGHT_CONTAINER浮动，您可能还需要提供它。

于 2012-05-30T11:27:29.353 回答
0

在 css 中为容器类赋予 margin-bottom 属性。

.container{
    margin-bottom:100px;
}
于 2021-12-29T13:04:18.453 回答