如何在页面底部放置一个浮动div？

编程问答 2022-04-26

问题描述

| 我有一个带有\“页眉\”，两列内容和\“页脚\”的网页。内容左列或\“ 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;\">
您可以看到一个草图：（\“ sidebar \”只是一个容器div） 我想将\“ credits \” div对准\“ contentinfo \” div的底部。并让\“ Menu \” div和\“ credits \” div之间的空间为空。就像是： 我试图设置位置：相对；在“侧边栏”中，位置：绝对；底部：0px;在“贷方”中。问题是我无法为“边栏”设置特定的高度，因为我不知道“ contentinfo”的高度。但是，在一次试用中，我将侧栏高度设置为足够高的值，并且代码无法正常工作。 我将不胜感激任何帮助。     

解决方法

        我做到了！这有点业余，但有效： 我将“信用”放在高度为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>
CSS： 
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;
}