HTML / CSS：如何获得正文和页脚之间的固定边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30556285/
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
HTML / CSS: How to get fixed margin between body and footer
提问by keewee279
I am new to CSS and am trying to set up a page so that there is always a fixed margin / space between the page's main content (sidebar / sections) and the footer(e.g. 120px) which should work cross-browser.
Also, in case there is very little content on a page the footer should always appear at least at the bottomof the (visible) screen.
我是 CSS 新手，我正在尝试设置一个页面，以便在页面的主要内容（侧边栏/部分）和页脚（例如 120px）之间始终有一个固定的边距/空间，这应该可以跨浏览器工作。
此外，如果页面上的内容很少，页脚应始终至少出现在（可见）屏幕的底部。
I made multiple attempts by applying a class "footer", incl. the following, but the margin is always ignored.
我通过应用类进行了多次尝试"footer"，包括。以下，但边距总是被忽略。
My HTML structure (simplified):
我的 HTML 结构（简化）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
</html>
My CSS:
我的CSS：
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom
}
.footer:before {
clear: both;
display: block;
height: 120px;
min-height: 120px;
}
Can someone help me with this ?
Also, if anything should be changed regarding my HTML please let me know as well.
有人可以帮我弄这个吗 ？
另外，如果我的 HTML 有任何需要更改的地方，也请告诉我。
Many thanks in advance, Mike
提前非常感谢，迈克
采纳答案by AndreiDMS
This should help:
这应该有帮助：
html, body {
height: 100%;
}
body {
margin:0px;
padding: 0px;
}
.wrap {
height: auto;
margin: 0 auto -80px; /* footer height + space */
min-height: 100%;
padding: 0 0 80px; /* footer height + space */
box-sizing: border-box;
overflow: auto;
}
.footer {
background-color: #111111;
color: #eeeeee;
border-top: 1px solid red;
height: 60px; /* footer height */
padding-top: 20px;
display: block;
margin-top: 20px; /* space between content and footer */
box-sizing: border-box;
position: relative;
width: 100%;
}<body>
<div class="wrap">
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
</div>
<footer class="footer">
<div>Some text</div>
</footer>
</body>回答by Mark
Why you use ":before"?
为什么要使用“:before”？
Your css should look like this:
你的 css 应该是这样的：
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
Try this example (works fine for me). If it not works - make sure you use css reset.
试试这个例子（对我来说很好用）。如果它不起作用 - 确保您使用 css reset。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav style="background:grey;height:100px;">
<!-- ... -->
</nav>
<section id="sidebar" style="background:green;height:100px;">
<!-- ... -->
</section>
<section id="main" style="background:red;height:100px;">
<!-- ... -->
</section>
<footer class="footer" style="background:blue;">
<div>Some text</div>
</footer>
</body>
</html>
<style>
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
</style>
回答by Mark
To add a margin between the body and footer, just add this to the style of the footer section:
padding:20px 0px 0px 0px;
要在正文和页脚之间添加边距，只需将其添加到页脚部分的样式：
padding:20px 0px 0px 0px;
Keeping the footer at the bottom is more complicated. Try something like this for css:
将页脚保持在底部更为复杂。为 css 尝试这样的事情：
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper{ /*create a div around whole html body
min-height:100%;
position:relative;
}
#main{
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
color: #333;
}
回答by Muhammad Irfan
just give styling to body with margin 0px.
只需将样式设置为边距为 0px 的 body。
body{
margin: 0px;
}
