具有固定和液柱的CSS布局 [英] CSS layout with both fixed and liquid columns

问题描述

在我的CSS布局混合液体和固定元素似乎麻烦。我尝试了各种设置，但我不能得到它正确。

Mixing both liquid and fixed elements in my CSS layout seems troubling. I've tried various settings, but I can't get it just right.

我试图创建一个模板，其中主要内容被每个侧（上，左，右，下）。

I am trying to create a template where the main content is surrounded by a content on each side (top, left, right, bottom).

<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>​

顶栏（标题）
左列应该有固定的高度/宽度
中心列应该根据视口和内容以高度/宽度浮动
右列应该具有固定的高度/宽度。
footer应该有固定高度

Top bar (header) should have fixed height. Left column should have fixed height/width center column should float in both height/width depending on viewport and content right column should have fixed height/width. footer should have fixed height

这是我的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;
}

中心列似乎不使用它的整个宽度/将期望四个边之间的整个区域为黄色。

The center-column does not seem to use it's whole width/height as I would expect the whole area between the four "sides" to be yellow.

另一个问题是限制视口，右栏落在中心列下面

Another issue is with limiting the viewport, the right column drops below the center column

我也不明白为什么我的标题需要内容显示。如果我删除字符K，则它不可见。

I also do not understand why my header needs content to be displayed. If I remove the character "K" it's not visible.

我有一个这个例子的小提琴发现这里： http://jsfiddle.net/jasonBr81/vZDND/2/

I've got an fiddle of this example found here: http://jsfiddle.net/jasonBr81/vZDND/2/

推荐答案

如果你不在乎IE7，你可以去这个。您将获得另一个优势，不仅是您的中间列没有固定的宽度：

If you don't care for IE7, you can go with this. You'll gain another advantage, not only that your middle column has no fixed width:

所有列的高度总是相同的。

All columns will always have the same height.

• 您可以轻松地在整个高度的一个容器中添加垂直边框


• 您永远不会遇到您描述的浮动问题

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>​

这篇关于具有固定和液柱的CSS布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！