如何解决如何在页面底部放置一个浮动div？
| 我有一个带有\“页眉\”，两列内容和\“页脚\”的网页。内容左列或\“ contentinfo \”具有可变大小，因为它取决于加载的信息。右列或“边栏”中有两个不同的div，一个带有“菜单”，另一个带有“贷方”。 就像是：<div id=\"header\"></div>
<div id=\"contentinfo\" style=\"float:left;\"></div>
<div id=\"sidebar\" style=\"float:right;\">
<div id=\"menu\"></div>
<div id=\"credits\"></div>
</div>
<div id=\"footer\" style=\"clear:both;\">
解决方法
我做到了！这有点业余，但有效：
我将“信用”放在高度为100像素的“页脚”下；位置：绝对；上：-100px;
在侧边栏中，我添加了一个高度为100px的\“ slot \”空div。这样，我避免了碰撞。
您可以在http://blog.tomtucker.cz.cc中看到它
HTML：
<!DOCTYPE html>
<head>
</head>
<body>
<div id=\"header\">Header</div>
<div id=\"contentinfo\" style=\"float:left;\">Content</div>
<div id=\"sidebar\" style=\"float:right;\">
<div id=\"menu\">Menu</div>
<div id=\"slot\" style=\"height:100px\">Slot</div>
<!-- With that I avoid overlapping with the credits -->
</div>
<div id=\"footer\" style=\"clear:both; position:relative;\">Footer
<div id=\"credits\">Credits</div>
</div>
</body>
</html>
body {
width:600px;
}
#header {
background-color:#F00;
height:30px;
width:600px;
}
#contentinfo {
background-color:#CCC;
height:600px; /* Any you want*/
width:500px;
float:left;
}
#sidebar {
width:100px;
float:right;
}
#menu {
background-color:#00F;
width:100%;
height:70px;
}
#slot {
background-color:#0F0;
width:!00%;
height:100px; /* The same as the credits div */
}
#footer {
background-color:#FF0;
position:relative;
clear:both;
height:30px;
width:600px;
}
#credits {
background-color:#609;
position:absolute;
height:100px;
width:100px;
top:-100px;
left:500px;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。