What's the Proper way to achieve 3-Column layout with fluid center

后端 未结 3 1633
独厮守ぢ
独厮守ぢ 2021-02-20 04:58

I am working on a 3-column layout with two fixed-width sidebars (left and right) and a fluid center. I have followed A List Apart\'s Holy Grail article, and, although this works

3条回答
  •  春和景丽
    2021-02-20 05:35

    There's really no point in floating the columns.

    HTML:

    Center content

    CSS:

    #left {
        position:absolute;
        left:0;
        width:50px;
        height:100%;
        background-color:pink;
    }
    
    #center {
        height:100%;
        margin: 0 50px;
        background-color:green;
    }
    
    #right {
        position:absolute;
        right:0;
        top:0;
        width:50px;
        height:100%;
        background-color:red;
    }
    
    body, html, #wrapper {
        width:100%;
        height:100%;
        padding:0;
        margin:0;
    }
    

    Demo: http://jsfiddle.net/AlienWebguy/ykAPM/

提交回复
热议问题