0

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;
}

中央の列は、4 つの「側面」の間の領域全体が黄色であると予想されるため、幅/高さ全体を使用していないようです。

ここに画像の説明を入力

別の問題は、ビューポートを制限することです。右側の列が中央の列の下に落ちます ここに画像の説明を入力

また、ヘッダーにコンテンツを表示する必要がある理由もわかりません。文字「K」を削除すると、表示されなくなります。

ここに画像の説明を入力

ここにあるこの例のフィドルを持っています: http://jsfiddle.net/jasonBr81/vZDND/2/

4

1 に答える 1

1

IE7 が気にならない場合は、これを使用できます。中央の列の幅が固定されていないだけでなく、別の利点が得られます。

すべての列は常に同じ高さになります。

  • 高さ全体にわたって1つのコンテナに垂直方向の境界線を簡単に追加できます
  • あなたが説明したフローティングの問題は決してありません

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>​
于 2012-07-05T18:50:43.400 に答える