Question

我有this代码。

希望div蓝色与红色div对齐而不影响页面的其余部分。

请注意，div＃leftcontent没有到达页面底部，我不明白为什么。也许解决方案是将div＃leftcontent对齐到页面底部。但是如何？

感谢。

Answer 1

你必须改变红色div：

bottom: 0px; /*delete*/
position:relative;
maring-top: 86px; /*to align to the blue*/

检查一下：http://jsfiddle.net/85unG/48/

并且对于高度，它不接触底部的原因是：

div #wrap { 身高：768px; / 应该是739 px; / }

Answer 2

CSS absolute positioning救援！

首先放弃height的固定overflow:auto和div#wrap。将overflow:auto替换为overflow:hidden：

div#wrap
{
    width:1024px; 
    /*height:768px; /* Forget about it! */
    margin:5px auto;
    border:2px solid #ccc;
    /*overflow:auto;/* Forget about it! */ overflow:hidden;
    position:relative;
}

...现在请注意div#wrap具有相对位置：

div#wrap
{
    width:1024px; 
    margin:5px auto;
    border:2px solid #ccc;
    overflow:hidden;
    position:relative; /* AWESOME */
}

这意味着div#wrap非静态定位，因此我们可以将内容置于其中......例如div#footer和div#social-networks：

div#wrap div#leftcontent div#footer {
    position:absolute;
    bottom:0px;
}
div#wrap div#nav div#social-networks {
    position:absolute;
    bottom:0px;
}

这将使div#footer和div#social-networks 0px的下边缘远离其非静态定位祖先的下边缘 - 即div#wrap。

坏消息：绝对定位可能会破坏事物的自然流动，因此您必须为div#footer和div#social-networks手动预留一些空间。使用padding执行此操作：

div#wrap
{
    width:1024px; 
    margin:5px auto;
    border:2px solid #ccc;
    overflow:hidden;
    position:relative;
    padding-bottom:50px; /* this is new... you can choose a better number than 50px */
}

水平对齐div

2 个答案: