在 HTML 页面底部添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10815188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding whitespace at bottom of HTML page
提问by Jono_2007
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
我正在尝试创建一个网站，其中标题栏和页脚都处于固定位置，即标题栏始终位于顶部，页脚始终位于底部。
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottomcss property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-topcss property but not for the bottom.
这产生了问题，因为我需要将页面上的内容向上推，以便页面页脚不会与内容重叠。我需要在内容底部添加一些空间，以便在用户滚动到页面底部时不会发生重叠。我试图向margin-bottom最底部的 DIV添加一个css 属性，以便应该在页面底部添加一些空间，这适用于使用margin-topcss 属性的最顶部 DIV，但不适用于底部。
This is the main structure to my website, without content:
这是我网站的主要结构，没有内容：
<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>
Can someone please suggest a method to achieve this effect?
有人可以建议一种方法来实现这种效果吗？
采纳答案by Saad
use paragraph to do this. html paragraph
使用段落来做到这一点。html 段落
回答by lackita
I've found this to be effective:
我发现这是有效的：
body {
padding-bottom: 50px;
}
回答by pjmil
margin-bottom moves the whole element, try padding-bottom instead.
margin-bottom 移动整个元素，尝试 padding-bottom 代替。
回答by atmd
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
将 padding-bottom 添加到最后一个元素应该这样做，或者您可以将 padding-bottom 添加到容器元素，请记住，如果您在 css 中设置了它，它将被添加到高度
回答by Holf
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
尝试使用 'padding-bottom' 代替。这种行为在不同浏览器中比“margin-bottom”更一致。
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
但请注意，如果您在任何计算中使用它，这将增加相关元素的整体高度。
回答by Gareth
I'd give PAGE_CONTENTa margin-bottom; you may need to also give it overflow:hiddenif your LEFTCONTAINERand RIGHT_CONTAINERare floated.
我会给PAGE_CONTENT一个margin-bottom; overflow:hidden如果您的LEFTCONTAINER和RIGHT_CONTAINER是浮动的，您可能还需要提供它。
