css - div 填充屏幕剩余空间

Question

我想问我可以做一个div来填满整个剩余的空间。

我需要用 2 个部分制作网站 - 一个始终在顶部，一个始终在底部

你可以给我一些想法（没有位置：绝对;）

所以这是我的想法 - 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

如果你给 div 一个 ID，你可以像这样使用 jQuery：

$(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);
}

调整大小部分还允许任何人调整屏幕大小以及是否有人使用平板电脑/智能手机更改方向。

Answer 2

我的理解是你想要三个 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%;
    }