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

我有一个带有“标题”的网页，有两列的内容和一个“页脚”。左列内容或“contentinfo”具有可变大小，因为它取决于加载的信息。右栏或“侧栏”有两个不同的div，其中一个带有“菜单”，另一个带有“信用”。如何将浮动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

我要的是把 “信用” div在“contentinfo”div的底部对齐。让“Menu”div和“credits”div之间的空格为空。喜欢的东西：

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

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

我将不胜感激任何帮助。

来源

2011-05-31 Octan

我是新来的，所以我不知道如果我做了什么。答案出现并消失了。但它并没有解决我的问题，因为我的“contentinfo”div的可变大小。无论如何。 – Octan 2011-05-31 21:55:47

如果您为我们添加了一些代码来查看和编辑，会更容易些。要添加代码到您的文章中，只需在每行代码前添加4个空格（包括代码中的空行） – 2011-05-31 22:10:14

¡这是有点业余，但它的作品：我把“信用”下的“页脚”的高度：100px;和一个位置：绝对;顶部：-100px; 在侧栏中，我添加了一个“槽”空div与高度：100px。这样我就避免了碰撞。 – Octan 2011-05-31 22:37:04

我做到了！这是有点业余但它的作品：

我把“信用”下的“页脚”的高度：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; 
}

来源

2011-06-01 11:19:37 Octan

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

回答

相关问题