页脚显示在内容上方。我总是在页面底部 [英] Footer is displayed over content. I need it always on the bottom of the page
问题描述
我是CSS和HTML的新手，我试图创建一个简单的HTML页面。
I am new to CSS and HTML, and I'm trying to create a simple HTML page.
关于实现：
我有一个main div称为具有相对位置的容器。在这个主要div内，我还有3个div：标头-绝对顶部，顶部：0px，菜单-绝对，页脚-绝对底部，0px。我的主要问题是关于内容div，它位于菜单div和页脚之间。如果此内容div包含很多信息，则其高度将大于主div（容器），并且在内容div的信息上显示页脚。
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.
不能在顶部带有padding-top的div菜单下给出位置和位置，但是最后2-3行在页脚下丢失。我应该说，粘性页脚不是我想要的。我需要另一个解决方案。
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.
这是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>
和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.
推荐答案
要在不修改HTML的情况下进行修复，请应用 display：inline -block; 到 #content 和 #footer ，删除位置并添加 padding-top：121像素； 返回到 #content ： http://jsfiddle.net/a2jJC/2/
To fix without modifying the HTML, apply display: inline-block; to #content and #footer, remove positioning, and add padding-top: 121px; back onto #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;
}
这篇关于页脚显示在内容上方。我总是在页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
