0

ページのサイズ変更に柔軟に対応する左右の 2 つの div を持つ流動的なレイアウトがあり、中央の div には最大幅と最小幅があります。

現在のレイアウトの上（上）にあるページ全体にdivを広げる方法を知っている人はいますか？jsFiddle の例で動作するようにしてください。ストレッチする div を、背景を持つ固定ヘッダーにしたいと考えています。

<style>
    html, body {
        height: 100%;
        font-family: 'Arial', 'Helvetica', Sans-Serif;
    }
    .container {
        display: table;
        width: 100%;
        height: 100%;
    }
    .container > div {
        display: table-cell;
        text-align: center;
    }
    .fixed {
        min-width: 200px; 
        max-width:300px;
        background: rgb(34, 177, 77);
        color: white;
    }
    .fluid {
        background: rgb(0, 162, 232);
    }
</style>

<div class="container">
    <div class="fluid">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class="fixed">
        I'm fluid! Glee is awesome!
    </div>
    <div class="fluid">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>
4

1 に答える 1

0

上に div を追加するだけです<div class="container">。スタイルを適用しない場合は、すでに全幅に伸びています。そう：

<style>
    html, body {
        height: 100%;
        font-family: 'Arial', 'Helvetica', Sans-Serif;
    }
    .header {
        background: red;
    }
    .container {
        display: table;
        width: 100%;
        height: 100%;
    }
    .container > div {
        display: table-cell;
        text-align: center;
    }
    .fixed {
        min-width: 200px; 
        max-width:300px;
        background: rgb(34, 177, 77);
        color: white;
    }
    .fluid {
        background: rgb(0, 162, 232);
    }
</style>

<div class="header">
    I'm a header! Hooray!
</div>
<div class="container">
    <div class="fluid">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class="fixed">
        I'm fluid! Glee is awesome!
    </div>
    <div class="fluid">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>
于 2012-11-07T06:18:49.057 に答える