2

コンテンツ領域を親の高さまで伸ばしたいのですが、タイトル領域の高さは固定です。私が作業している場合、親領域の高さが変わる可能性があるため、コンテンツ領域の高さをハードコードすることはできません。

HTML:

​<div class="parent">
    <div class="title">Title</div>
    <div class="content">
       <p>My Content</p>
    </div>
</div>​

CSS:

.parent{
    width : 500px;
    height: 300px;
    background-color : gray;
    position: absolute;
}

.title{
    height:50px;
    background-color: #94A6E0;
    margin:5px;
}

.content{
    background-color: #8CBF99;
    margin:5px;
}

JSFiddle: http://jsfiddle.net/PGJJv/

4

2 に答える 2

3

固定高さを使用せずにそれを行う方法があります。

親をdisplay: table;に、子を に設定できdisplay: table-rowます。次に、最も低い div が残りの高さになります。唯一のことは、2 つの要素の間のスペースを偽装したり、sで作業しborder-topたりするために、間に追加の要素が必要なことです。また、子のマージンの代わりに親にパディングを追加する必要があります。border-bottom don't<tr>

(これは実際の ではなく<tr>、セマティック div ですが、 の動作をエミュレートしているだけ<tr>です。)

HTML:

<div class="parent">
    <div class="title">Title</div>
    <span class="greyLine"></span>
    <div class="content">
        <p>My Content</p>
    </div>
</div>​

CSS:

.parent{
    width : 500px;
    height: 300px;
    background-color : gray;
    position: absolute;
    display: table;
    padding: 5px;
}

.title{
    height:50px;
    background-color: #94A6E0;
    display: table-row;
}

span.greyLine
{
    display: table-row;
    background-color: gray;
    height: 5px;
}

.content{
    background-color: #8CBF99;
    display: table-row;
}​

http://jsfiddle.net/Kyle_/PGJJv/6/

編集：

Dipaks が正しく指摘しているように、IE7 はこのdisplay: table-row;プロパティをサポートしていません。

于 2012-09-10T07:27:22.900 に答える
1

おそらく、テーブルのプロパティを使用できます。親を として設定 としてtable 表示するタイトルの高さを固定することができますtable-row。そして、コンテンツは 2 番目と最後の表の行です。常にテーブルの高さにフィットします。

ここにフィデの例があります：http://jsfiddle.net/PGJJv/5/

テンプレートを正確に再作成するには、余白と境界線をいじる必要があります。

于 2012-09-10T07:27:54.200 に答える