如何正确定位页脚？
我想将页脚放置在 #wrapper 的基线处，但我似乎所能做的就是将页脚放置在包装器下方。有人可以告诉我为什么会发生这种情况吗？
另外，如果有人发现我当前的设计方式有问题并且有更好的方法，我愿意接受任何建议。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sd</title>
<style type="text/css">
html, body {
width:100%;
background:brown;
border:0px solid red;
margin:0;
padding:0;
}
#wrapper {
width:1220px;
height:750px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
#header {
background-color:#aaa;
width:100%;
height:100px;
padding:0;
margin:0 auto 0 auto;
border:0px solid;
}
#content {
float:left;
width:100%;
height:649px;
padding:0;
margin:0;
border:0px solid;
}
#cell-left {
background-color:#bbb;
float:left;
width:200px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#cell-right {
float:right;
width:1010px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#footer {
float:left;
width:100%;
height:25px;
padding:4px;
margin:0;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="cell-left">dsssd</div>
<div id="cell-right">dsssd</div>
</div>
<div id="footer">sdsd</div>
</div>
</body>
</html>
I want to position my footer at the baseline of my #wrapper but all I seem to be able to do is get the footer positioned below the wrapper. Can someone please tell me why this is happening?
Also, if someone sees a problem with how I have this currently designed and has a better way, I'm open to any suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sd</title>
<style type="text/css">
html, body {
width:100%;
background:brown;
border:0px solid red;
margin:0;
padding:0;
}
#wrapper {
width:1220px;
height:750px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
#header {
background-color:#aaa;
width:100%;
height:100px;
padding:0;
margin:0 auto 0 auto;
border:0px solid;
}
#content {
float:left;
width:100%;
height:649px;
padding:0;
margin:0;
border:0px solid;
}
#cell-left {
background-color:#bbb;
float:left;
width:200px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#cell-right {
float:right;
width:1010px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#footer {
float:left;
width:100%;
height:25px;
padding:4px;
margin:0;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="cell-left">dsssd</div>
<div id="cell-right">dsssd</div>
</div>
<div id="footer">sdsd</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您应该删除
#wrapper上的固定高度 (height:750px) 和 正确清除#wrapper内的浮动元素。最简单的方法是将
overflow:hidden添加到#wrapper。参见： http://jsbin.com/iciwo6
更改后的 CSS：
You should remove the fixed height on
#wrapper(height:750px), and clear the floated elements inside#wrapperproperly.The easiest way to do this is to add
overflow: hiddento#wrapper.See: http://jsbin.com/iciwo6
The changed CSS:
您提到了包装器高度 750 显示出问题。只要说清楚并给出
height:auto你已经给出了，
所以它几乎需要 750px 。所以没有页脚空间。所以它就在包装器下方。所以尝试给出高度：自动。
You have mentioned the wrapper height 750 that is showing problem.Just make it clear and give
height:autoYou have given
so it is taking almost 750px .so there is no space for footer.so it is coming just below the wrapper.So try to give height:auto.