css - div 残りのスペース画面を埋める

Question

div残りのスペース全体を埋めるを作成できますか。

サイトを 2 つの部分で構成する必要があります。1 つは常に上に、もう 1 つは常に下に配置します。

これについていくつかのアイデアを教えてください（位置なし：絶対;）

だからここに私の考えがあります - クラスを持つ3つのDiv: HTML:

<div class="top"><div>
<div class="center" ></div>
<div class="bottom"></div>  

CSS:

.bottom{
position:relative;
width:100%;
}
.top{
display:block;
min-height: 250px;
}
.center{
display:block;
min-height:30px;
height:auto;
}

Answer 1

If you give the divs an ID You can use jQuery like so:

$(window).resize(function () {
    resizeWindow();
});

function resizeWindow() {
    var sHeight = $(window).height();
    var tHeight = $("#top").height();
    var bHeight = $("#bottom").height();
    var nHeight = sHeight - tHeight - bHeight;
    $("#center").height(nHeight);
}

The resize part also allows for anyone resizing the screen and if someone with a tablet/smartphone changes the orientation.

Answer 2

私が理解しているのは、3 つの div を重ね合わせたいということです。

<div id="container">
    <div class="top"><div>
    <div class="center" ></div>
    <div class="bottom"></div> 
</div> 

#container {
width:100%;
height:100%;
}
    .bottom{
    position:relative;
    height:25%;
    width:100%;
    }
    .top{
    position:relative;
    height:25%;
    width:100%;
    }
    .center{
    position:relative;
    height:50%;
    width:100%;
    }