CSS：具有半流體中心的三列布局

Question

我正在嘗試創建基本的3列布局。 本質上，中柱應該是流動的，因為它應該膨脹以消耗左柱和右柱未使用的任何空間。 但是，它還需要具有約378個像素的固定min-width 。

有許多用於與一個完全流體中心柱創建3列布局，選項與或不使用浮動。 但是，到目前為止，我遇到的每個預打包解決方案（以及我自己嘗試過的解決方案）的問題是，隨着頁面寬度的減小，一旦頁面縮小，右列將位於中間列的頂部變得太狹窄。

如果可能，我想防止這種情況。 理想情況是，一旦達到min-width則右列應保持在原位置，並且頁面應可水平滾動。 因此，目標是：

1. 3列布局，帶有流體中心柱和固定寬度的左右柱。
2. 具有固定最小寬度的中心列，以防止它變得太小。
3. 當窗口變得太小時，一個遵循最小寬度並且不踐踏，不漂浮或不包裹在中心列下方的右列。

首選純CSS解決方案，但是如果有使用一些聰明的JavaScript的簡單方法，我也不反對這種方法。

Answer 1

為此，您可以使用display：table屬性。 這樣寫：

#wrapper{
    display:table;
    width:100%;
    height:100%;
}
#wrapper > div{
    display:table-cell;
    height:100%;
}

#left {
    width:50px;
    min-width:50px;
    background-color:pink;
}

#center {
    background-color:green;
    min-width:200px;
}

#right {
    width:50px;
    min-width:50px;
    background-color:red;
}

body, html{
    width:100%;
    height:100%;

}

檢查此http://jsfiddle.net/ykAPM/137/