在设计网页时，我使用标签来划分页面中的部分。所有部分都根据我为此编写的 CSS 工作，但应该是页面页 footer 分的“最后”div 与上部部分重合。 任何人都可以帮助如何克服这个问题。 我在这里提供了 JSFiddle 链接 jsfiddle
<html xmlns="http://www.w3.org/1999/html">
<head>
<style type="text/css">
#biggest{
width:90%;
padding-left:5%;
padding-right:5%;
height:auto;
}
#header{
height:150px;
background-color:#8888ff;
}
#menus{
height:50px;
background-color:#d9d9d9;
}
#threecols{
width:100%;
height:inherit;
}
#one{
width:20%;
height:auto;
background-color:#0081c2;
float: left;
}
#two{
width:78%;
height:auto;
float:right;
}
#three{
width:70%;
height:auto;
float:left;
background-color:#3366FF;
}
#four{
width:29%;
height:auto;
float:right;
background-color:#ffffcc;
}
#last{
width:100%;
height:100px;
background-color:#ffdddd;
}
</style>
<body>
<div id="biggest">
<div id="header"></div>
<div id="menus"></div>
<div id="threecols">
<div id="one">
This is one<br/>
This is one<br/>
This is one<br/>
This is one<br/>
This is one<br/>
This is one<br/>
</div>
<div id="two">
<div id="three">
This is one<br/>
This is one<br/>
This is one<br/>
This is one<br/>
This is one<br/>
This is one<br/>
</div>
<div id="four">
This is one<br/>
This is one<br/>
This is one<br/></div>
</div>
</div>
<div id="last"></div>
</div>
</body>
</html>
最佳答案
你是否期待这样的事情: Demo
CSS:
#last {
clear:both;
display:block;
width:100%;
height:100px;
background-color:#ffdddd;
}
关于html - 页 footer 分与使用 CSS 的其他分区部分重合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28534889/