0

任意の要素を保持する高さが設定された div と、残りのスペースを埋めたい別の div があり、div が埋められます。 jsfiddle

html:

<div class=container>
    <div class=title>
        <h1> title </h1>
    </div>
    <div class=body>
        <h1> stuff here </h1>    
    </div>
</div>​

CSS:

.container {
    border: 1px red solid;
    height: 300px;
}
.title {
    background: blue;    
}
.body {
    background: green;
}

タイトルと含まれる div のサイズは動的であるため、緑の div で赤い境界線内の空白を埋めて、このように見えるようにしますが、高さを明示的に設定する必要はありません。

4

1 に答える 1

1

私のやり方は、タイトルを本文の中に入れることです。次に、本体の高さを 100% に設定すると (コンテナーの高さが固定されているため)、タイトルは必要なものだけを独自の背景で埋めます。関連する要素を 1 つのコンテナーにまとめることで、レイアウト内での移動も非常に簡単になります。

html:

<div class=container>
    <div class=body>
        <div class=title>
            <h1> title </h1>
        </div>
    <h1> stuff here </h1>    
    </div>
</div>​

CSS:

.container {
    border: 1px red solid;
    height: 300px;
}
.title {
    background: blue;

}
.body {
    height:100%;
    background: green;
}

コンテナー内に別の要素をいつでも追加して、複数選択を含め、親コンテナーのプロパティを継承させることができます。

于 2012-08-18T23:57:16.720 に答える