水平對齊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 */ 
}