我想将我的页面分成 3 个部分(页眉、内容、页脚)。问题是页脚不应该在底部，它在页面的中间。我做错了什么？
#page{
margin: 0 auto;
}
html{ height:100%;
margin:0;
padding:0;}
body{
height:100%;
margin:0;
padding:0;
background:#FFF;
font-family: verdana;
background-color: white;
}
#header{
top: 0px;
width: 100%;
height:2.5em;
border-bottom: 1px solid rgba(168, 164, 164, 1);
background-color: #FAF0E6;
}
#content{ a
width: 100%;
height:100%;
text-align: center;
}
#formulario{
width:48em;
margin-top:2em ;
margin-right: auto;
margin-left:auto;
}
#footer{
margin-top:2em;
margin-bottom: 0px;
bottom:0em;
font-size: 1em;
font-family: "lucida grande";
text-align: center;
width: 100%;
height:1.5em;
background-color: #D0F5A9;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page">
<div id="header">
hi
</div>
<div id="content">
<div id="formulario" >hi
</div>
</div>
<div id="footer">
hi</div>
</div>
</body>`enter code here`
</html>`enter code here`最佳答案
我建议您使用 class 而不是 id 作为最佳实践，因为 id 只能使用一次，但您可以使用 class 多次。你可以这样做:
演示 Fiddle [编辑]
看看这个Fiddle也是。
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
font-family: verdana;
background-color: white;
background: #FFF;
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: #FAF0E6;
position: relative;
width: 100%;
height: 2.5em;
border-bottom: 1px solid rgba(168, 164, 164, 1);
}
.content {
position: relative;
width: 100%;
min-height: 100%;
text-align: center;
margin-top: -2.5em;
margin-bottom: -1.5em;
padding-top: 2.5em;
padding-bottom: 1.5em;
}
.formulario {
width: 48em;
margin-top: 2em;
margin-right: auto;
margin-left: auto;
}
.footer {
background-color: #D0F5A9;
position: relative;
width: 100%;
height: 1.5em;
font-family:"lucida grande";
font-size: 1em;
text-align: center;
}<div class="header">hi</div>
<div class="content">
<div class="formulario">HI!</div>
</div>
<div class="footer">hi</div>关于html - CSS 页脚不在底部(无效的绝对位置或固定位置)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25954282/