如何将浮动 div 放在页面底部？答案

【问题标题】：How can I put a floating div to the bottom of the page?如何将浮动 div 放在页面底部？
【发布时间】：2011-09-05 19:41:52
【问题描述】：

我有一个带有“页眉”的网页，一个包含两列的内容和一个“页脚”。内容左列或“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;">

你可以看到一个草图：（“侧边栏”只是一个容器div）

我想要的是将“credits” div 对齐在“contentinfo” div 的底部。并让“菜单” div 和“信用” div 之间的空间为空。比如：

我试图设置位置：相对；在“侧边栏”和位置：绝对；底部：0px；在“学分”中。问题是我无法为“侧边栏”设置特定的高度，因为我不知道“contentinfo”的高度。但是，在试用中，我已将侧栏高度设置为足够高的值，但代码不起作用。

我将不胜感激。

【问题讨论】：

我是新来的，不知道是不是我做错了什么。一个答案出现又消失。然而，由于我的“contentinfo”div 的大小可变，它并没有解决我的问题。还是谢谢。
如果您添加了一些代码供我们查看和编辑，会更容易。要在帖子中添加代码，只需在每行代码前添加 4 个空格（包括代码中的空白行）
¡我成功了！这有点业余，但它有效：我将“学分”放在“页脚”下，高度为：100px；和一个职位：绝对的；顶部：-100px；在侧栏中，我添加了一个高度为 100 像素的“插槽”空 div。这样我就避免了碰撞。

标签： html positioning css-float

【解决方案1】：

¡我成功了！这有点业余，但很有效：

我把“credits”放在“footer”下面，高度：100px；和一个职位：绝对的；顶部：-100px;

在侧边栏中，我添加了一个高度为 100 像素的“插槽”空 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;
}

【讨论】：