Html 页脚显示在内容之上。我需要它总是在页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19865705/
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
Footer is displayed over content. I need it always on the bottom of the page
提问by user2271933
I am new to CSS and HTML, and I'm trying to create a simple HTML page.
我是 CSS 和 HTML 的新手，我正在尝试创建一个简单的 HTML 页面。
So about the implementation : I have a main div called container with relative positioning. Inside this main div, I have 3 more div's: header- positioned absolute with top: 0px, menu- also absolute, footer- absolute with bottom: 0px. My main problem is about the content div which is placed between menu div and the footer. If this content div has much information, its height becomes larger than the main div(container), and the footer is displayed over the information from the content div.
那么关于实现：我有一个称为容器的主div，它具有相对定位。在这个主 div 中，我还有 3 个 div：页眉-绝对定位，顶部：0px，菜单-也是绝对的，页脚-绝对底部：0px。我的主要问题是关于放置在菜单 div 和页脚之间的内容 div。如果这个内容div有很多信息，它的高度会比主div（容器）大，页脚显示在内容div的信息上。
I tried to not give a positioning and place under the menu div with padding-top, but then the last 2-3 lines are lost under the footer. I should say that a sticky footer is not what I'm looking for. I need another solution.
我试图不使用 padding-top 在菜单 div 下给出定位和放置，但是最后 2-3 行在页脚下丢失了。我应该说粘性页脚不是我想要的。我需要另一个解决方案。
This the HTML:
这是 HTML：
<body>
<!-- CONTAINER -->
<div id="container">
<!--HEADER-->
<div id="header" >
<p>Header</p>
</div>
<div id="menu" >
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>
</div>
<!-- Problematic div -->
<div id="content"> // simulate large amount of information
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
<h1> Content</h1>
</div>
<div id="footer">
<p> Footer </p>
</div>
</div>
</body>
and CSS:
和 CSS：
html,
body {
margin:0;
padding:0;
height:100%;
}
#container{
position : relative;
min-height:100%;
}
#header{
top : 0px;
position : absolute;
width : 100%;
height : 100px;
background-color: red;
}
#header p{
position : absolute;
top : 39px;
}
#menu{
position : absolute;
top : 100px;
width: 100%;
background-color: yellow;
overflow: auto;
white-space:nowrap;
}
#menu ul{
margin : 0px;
padding-left: 20px;
list-style-type: none;
}
#menu li{
display : inline-block;
padding-right: 150px;
border-style : 1px solid;
}
#content{
/*
padding-top : 121px;
*/
position: absolute;
top : 120px;
width : 100%;
background-color: green;
}
#footer{
position: absolute;
width: 100%;
height : 60px;
background-color:grey;
bottom : 0px;
}
Sorry for the long post. I just tried to explain the problem as best as possible. Thanks a lot.
抱歉，帖子太长了。我只是试图尽可能最好地解释这个问题。非常感谢。
回答by Stuart Kershaw
To fix without modifying the HTML, apply display: inline-block;to #contentand #footer, remove positioning, and add padding-top: 121px;back onto #content: http://jsfiddle.net/a2jJC/2/
要在不修改HTML修正，适用display: inline-block;于#content和#footer，删除的定位，并添加padding-top: 121px;返回到#content：http://jsfiddle.net/a2jJC/2/
#content {
padding-top : 121px;
width : 100%;
background-color: green;
display: inline-block;
}
#footer {
width: 100%;
height : 60px;
background-color:grey;
display: inline-block;
}
回答by Finni McFinger
You could constrain the height of your div#content and use overflow: scroll to make the content scrollable.
您可以限制 div#content 的高度并使用 overflow: scroll 使内容可滚动。
#content{
position: absolute;
top: 120px;
width: 10%;
background-color: green;
height: 800px; /* assumed height, use an appropriate value */
overflow: scroll;
}
回答by Drew Moore
I was having this same issue with content being hidden behind my footer. If you have your footer at a (somewhat) fixed height, like I do:
我遇到了同样的问题，内容隐藏在我的页脚后面。如果您的页脚处于（有点）固定高度，就像我一样：
#footer {
position: fixed;
bottom: 0;
width: 100%;
min-height: 100px;
max-height: 110px;
background-color: rgba(36, 32, 33, 0.9);
color: white;
font-family: "Helvetica Neue", Helvetica;
padding: 10px 0px;
padding-top: 10px;
margin-top: 30px;
font-weight: 100;
clear: both;
}
Just set your bottom margin of your div containing the page content to a height just greater than that of the max footer height. Scrolling content will stop right on top of the footer!
只需将包含页面内容的 div 的底部边距设置为略大于最大页脚高度的高度。滚动内容将停止在页脚的正上方！
#content {
-moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
-webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
box-shadow: 1px 1px 2px 0 #d0d0d0;
background: #fff;
border: 1px solid #ccc;
border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
padding: 10px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 115px;
clear: both;
}
Just as a disclaimer, this is my first answer to a question here. I apologize in advance for any coding faux pas committed above. :)
作为免责声明，这是我对这里问题的第一个回答。对于上面犯下的任何编码失礼，我提前道歉。:)
