css - 固定高さの下の div、残りの垂直スペースを埋める上の div?

Question

固定の高さを持ち、ページの下部にとどまり、残りの垂直スペースを占有する別の div をその上に作成するにはどうすればよいですか?

Answer 1

このようなものは、あなたが探しているものを達成するはずです。

Answer 2

ページのサイズが変更されたときに、他の例が実際にうまく機能するとは思いません。

この種のことは、一般的に言えば、CSS が優れた仕事をするものではないため、数行の JavaScript を使用して行うのが最適です。

実際のデモについては、こちらを参照してください。mod.it では、クロムでデモを表示する必要がありますが、デモのコードはクロス ブラウザーであり、どこでも動作します。

https://mod.it/6hQaRsEL

Answer 3

このようにしてみてください

デモを見る

高さを使用: 使用可能な残りの高さを取る最初の div を継承します

html

<div id='container'>
<div id='first'>
    First Div content
</div>
    <div id='second'>
        Second div content
    </div>
</div>

CSS

#container{
width: 600px;
height: 450px;
border: 1px solid black;
}
#second{
position: relative;
bottom: 100px;
height: 100px;
background-color: green;
}  
#first{
height: inherit;
background-color: red;
}