CSS - 列對齊到頁面底部，但與滾動內容的增加。

Question

http://jsfiddle.net/yLhh3/

我在致命簡單的CSS佈局中有三列。他們看起來很完美，直到內容被添加到其中的一個從而迫使該頁面滾動（用小提琴向下滾動）。

所有我想要的是紅色的框經常去的頁面（不是窗口/屏幕，頁面）的底部。這怎麼可以用CSS來完成？

.column 
{ 
    background-color: red; 
    width: 400px; 

    /* Page height minus header */ 
    min-height: calc(100% - 192px); 

    /* Align to bottom of the page */ 
    position: absolute; 
    top: 192px; 
} 

/* Half the page width minus (1.5 columns + offset between columns) */ 
.left { left: calc(50% - 630px); } 
.right { right: calc(50% - 630px); } 

/* Half the page width minus 0.5 columns */ 
.center { left: calc(50% - 200px); } 

Answer 1

一直有問題和疑問這件事，有很多種方法去了解它，但最簡單的，因爲你的使用絕對定位，它將「列」div包裹在「中心」div內。

<div class="column center"> 
    <div class="column right"></div> 
    <div class="column left"></div> 
</div> 

這使得左側和右側的div伸展到父母的中心，即100％。您可以在小提琴中看到一些小的更改，例如height: 100%和top: 0（對於包含的列），因爲子頂部的父頂部被視爲0。

jsfiddle

Answer 2

我希望我明白你想達到的目標。

我用overflow: scroll;這樣你就不會失去的內容（您可以將其設置爲僅Ÿ如果你想或隱藏）。 我還用height，因爲與min-height的overflow沒有觸發

.column 
{ 
    background-color: red; 
    width: 400px; 

    /* Page height minus header */ 
    height: calc(100% - 192px); 

    /* Align to bottom of the page */ 
    position: absolute; 
    top: 192px; 
    overflow: scroll; 
}