css - 具有固定列和液体列的 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>​