固定和液柱的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>​