gpt4 book ai didi

css - 如何正确放置页脚?

转载 作者:行者123 更新时间:2023-11-28 13:44:17 24 4
gpt4 key购买 nike

我想将页脚定位在我的#wrapper 的基线处,但我似乎只能将页脚定位在 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>

最佳答案

您应该删除 #wrapper 上的固定高度(height:750px)和 clear the floated elements#wrapper 内正确。

最简单的方法是将 overflow: hidden 添加到 #wrapper

参见: http://jsbin.com/iciwo6

更改后的 CSS:

#wrapper {
overflow:hidden;
width:1220px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}

关于css - 如何正确放置页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6122111/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com