Question

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

sketch http://i55.tinypic.com/ws9t1w.jpg

我想要的是将“credits”div对齐在“contentinfo”div的底部。并让“Menu”div和“credits”div之间的空格为空。类似的东西：

desired http://i52.tinypic.com/16aqn3d.jpg

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

我将不胜感激。

Answer 1

我做到了！它有点业余但它有效：

我把“信用”放在“页脚”下面，高度为：100px;和位置：绝对;顶部：-100px;

在侧栏中，我添加了一个“槽”空div，高度为：100px。这样我就避免了碰撞。

您可以在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;
}

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

1 个答案: