web-dev-qa-db-ja.com

DIV内の2つのDIV。親DIVのスペースを2番目のDIVで自動入力するにはどうすればよいですか？

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

親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の残りのすべてのスペースを占める必要があります。

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

これに関するどんな助けも大いに感謝します。

csshtmlheightautofill
11
Nirman

追加 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%
}

デモ更新

15
Sowmya

新しいCSSの方法は、flexboxを使用することです。

/*QuickReset*/ *{box-sizing:border-box;margin:0;} html,body{height:100%;}

.flex-col {
  display: flex;
  flex-direction: column; /* or:   flex-flow: column wrap; */
  height: 100%;
}

.flex-fill { /* Add this class to the element you want to expand */
  flex: 1;  
}
<div class="flex-col">
    <div style="background:red;"> HEADER </div>
    <div class="flex-fill" style="background:yellow;"> CONTENT </div>
    <div style="background:red;"> FOOTER</div>
</div>
8
Roko C. Buljan