固定和液柱的CSS佈局

Question

在我的CSS佈局中混合液體和固定元素似乎令人不安。我嘗試了各種設置，但我無法正確理解它。

我正在嘗試創建一個模板，其中主要內容由每側（頂部，左側，右側，底部）上的內容包圍。

<div id="container"> 
<div id="header">k</div> 
<div id="left-column"></div> 
    <div id="center-column"><h1>Main Page</h1> Liquid layout trial</div> 
<div id="right-column"></div> 
<div id="footer"></div> 
</div>​ 

頂部酒吧（頭）應該有固定的高度。 左欄應該有固定的高度/寬度 中欄應根據視口和內容浮動在高度/寬度 右欄應該有固定的高度/寬度。 頁腳應該有固定的高度

這裏是我的CSS：

#header{ 
    background-color: blue; 
    height 50px; 
    color: white; 
    clear:both; 
} 

#left-column{ 
    background-color: green; 
    width:100px; 
    height:400px; 
    float: left; 
} 

#center-column{ 
    background-color: yellow; 
    float:left; 
} 

#right-column{ 
    background-color: red; 
    float:right; 
    height: 400px; 
    width: 100px; 
} 

#footer{ 
    clear: both; 
    height: 50px; 
    background-color: pink; 
} 

中心柱似乎並不使用它的整個寬度/高度，我希望這四個「面」之間是整個區域黃色。

另一個問題是限制視，右列下降到中心柱下方

我也弄不明白，爲什麼我的頭必須要顯示的內容。如果我刪除了字符「K」，它不可見。

我來到這裏發現，此示例的小提琴：http://jsfiddle.net/jasonBr81/vZDND/2/

Answer 1

如果你不喜歡IE7，你可以用這個去。您將獲得另一個優勢，不僅僅是您的中間列沒有固定寬度：

所有列將始終具有相同的高度。

• ，你可以很容易地在一個容器在整個高度增加一個垂直邊界
• 你永遠不會有你描述

CSS

<style> 
    #header { 
     height:    50px; 
     background-color: blue; 
     color:    white; 
    } 

    #left-column{ 
     display:   table-cell;  
     height:    400px; 
     background-color: green; 
    } 

    .left-column-inner { 
     width:    100px; 
    } 

    #center-column { 
     display:   table-cell; 
     width:    100%; 
     background-color: yellow; 
    } 

    #right-column { 
     display:   table-cell; 
     background-color: red; 
    } 

    .right-column-inner { 
     width:    100px; 
    } 

    #footer{ 
     clear: both; 
     height: 50px; 
     background-color: pink; 
    } 
</style> 

HTML

浮動問題

<div id="container"> 
    <div id="header">HEADER</div> 

    <div id="left-column"> 
     <div class="left-column-inner">LEFT</div> 
    </div> 
    <div id="center-column"> 
      <h1>Main Page</h1> 
      <p> 
       Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial 
       Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial Liquid layout trial 
      <p> 
    </div> 
    <div id="right-column"> 
     <div class="right-column-inner">RIGHT</div> 
    </div> 

    <div id="footer">FOOTER</div> 
</div>​