14

このフィドルにアクセスして、私が何を意味するかを確認してください-

親 DIV があり、その中に 2 つの DIV が垂直方向に配置されています。上部の DIV はそのコンテンツの高さのみを持つ必要がありますが、下部の DIV はコンテンツの高さに関係なく親 DIV のすべての残りのスペースを占める必要があり、親 DIV と重なってはなりません。

HTML:

<div class="outer">
    <div  class="inner-title">
        THIS IS MY TITLE
    </div>
    <div class="inner-content">
        CONTENT AREA
    </div>
</div>

CSS:

html,body
{
height: 100%;
}

.outer
{
    background-color:blue;
    height: 80%;
}

.inner-title
{
    background-color:red;
}

.inner-content
{
background-color:yellow;
    height: auto;
}

つまり、「内部コンテンツ」は、「外部」DIV の残りのすべてのスペースを重複することなく占有する必要があります。

これを達成する方法のアイデアはありますか?

これに関するヘルプは大歓迎です。

4

2 に答える 2

17

display:table;親 div と display:table-row;子divに追加

そしてheight:0最初の子divへ。これは自動高さを取ります

    html,body{
    height: 100%;
}
.outer{
    background-color:blue;
    height: 80%; border:red solid 2px;
    display: table;
     width:100%
}
.inner-title{
    background-color:red;
    display:table-row; 
     width:100%
}
.inner-content{
    background-color:grey;
    display:table-row;
    width:100%;
    height:100%
}

デモ更新

于 2013-07-11T10:06:33.850 に答える