水平对齐div

Question

我有this的代码。

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

请注意，div＃leftcontent不会进入页面的底部，我不理解为什么。 也许解决的办法是把div＃leftcontent对齐到页面底部。但是如何？

谢谢。

Answer 1

你必须改变红格：

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

检查了这一点：http://jsfiddle.net/85unG/48/

和高度，原因它不触及底部：

的div＃包装{ height：768px;/应该是739 px;/ }

Answer 2

CSS absolute positioning来救援！

第一沟固定height和overflow:auto为div#wrap。与overflow:hidden更换overflow:auto：

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; 
} 

该W生病位置div#footer和div#social-networks0px的底部边缘远离其非静态定位祖先的底部边缘 - 即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 */ 
}