5

さて、私は自分のウェブサイトに「聖杯」スタイルのレイアウトを実装することに取り組んできました。これまでのところかなり近いですが、修正したいことが 2 つあります。

目標は、ページの長さがブラウザー ウィンドウの高さ、ヘッダー、および 3 列で拡張される「スティッキー」なフッターです。左右に2本の固定柱、中央に1本の流体柱。

私が抱えている問題は、現在、中央の「流動」列が期待どおりに機能していないように見えることです。基本的に、固定列を常に完全に表示し、中央の列が残りの水平スペースを埋めるようにしたいと考えています。しかし、中央の列が多くのスペースを占めているため、右の列を表示するにはスクロールする必要があります (下の画像を参照)。また、「text-align: center」コードは、中央の列の表示可能領域内でテキストを中央に配置していないようです。どんな助けでも大歓迎です！

画像: http://i.imgur.com/FPuSiIu.png

html:

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="test.css" />
    </head>
    <body>
        <div id="header">
            <p>Header</p>
        </div>
        <div id="container">
            <div id="center">
                <p>Content</p>
            </div>
            <div id="left">
                <p>Content</p>
            </div>
            <div id="right">
                <p>Content</p>
            </div>
        </div>
        <div id="footer">
            <p>Footer</p>
        </div>

    </body>
</html>

CSS:

* {
    margin: 0;
}

#container {
    width:100%;
}

#header {
    text-align: center;
    background: #5D7B93;
    height: 95px;
    padding: 5px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 15;
}
#center{
    text-align: center;
    margin-top: 105px;
    background: red;
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
}
#left {

    height: 100%;   
    width: 150px;
    text-align:center;
    background:#EAEAEA;
    margin-top: 105px;
    margin-left: -100%;
    overflow: scroll;
    position: relative;
    float: left;
}

#right {
    position: relative;
    height: 100%;
    width: 150px;
    margin-right: -100%;
    margin-top: 105px;
    background: blue;
    text-align: center;
    float: left;
}
#footer {
    text-align:center;
    background: #5D7B93;
    height:25px;
    padding:5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
4

2 に答える 2

5

する必要はありませんfloat。サイドバーだけposition: absoluteで、中央の div に両側に固定マージンを与えます。

JSFiddle

CSS

#container{
    position: relative;
}

#left, #right {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0;
}

#left {
    left: 0;
}

#right {
    right: 0;
}

#center {
    margin: 0 200px;
}
于 2013-03-04T05:30:11.360 に答える