Css div填充剩余空间屏幕

我想问一下，我可以做一个

div

来填充剩余的全部空间吗

我需要使网站与2部分-一个始终在顶部和底部的一个始终

你可以给我一些建议（无位置：绝对；）

下面是我的想法-3个div和类： HTML:

---

如果给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);
}

---

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

我的理解是，您希望三个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%;
    }

#容器{
宽度：100%；
身高：100%；
}
.底部{
位置：相对位置；
身高：25%；
宽度：100%；
}
.顶{
位置：相对位置；
身高：25%；
宽度：100%；
}
.中心{
位置：相对位置；
身高：50%；
宽度：100%；
}

您的目标不明确。

.top

和

.bottom

是否将成为固定高度？

.center

始终填充空间很重要，还是您只是希望此区域具有特定的背景颜色。你应该在你的问题上投入更多的精力和细节，这样人们才能真正帮助你。你所说的“剩余空间”是什么意思？你是说屏幕上剩余的空间吗？父级上的剩余空间是多少？你能创建一个JSFIDLE作为你尝试做什么的例子吗？@Axel是的，它们的高度是固定的，但我不知道该站点的屏幕分辨率是多少，因为它是移动版本。它们是

.top

和

.bottom

固定的吗（这意味着它们总是会出现，或者当

.center

有足够的内容垂直填充屏幕时，它们会从屏幕上滚动吗？@Alex我认为浏览器可以修复它们。谢谢，但我对jQuery没有什么问题（我还在学习）这是我的代码。我已经在html/css中将它们更改为id，这是我的jquery代码，它不起作用。您可以提供新的html吗？您还可以尝试在document.ready函数中调用resizeWindow（）吗？您可以通过放置警报（）来检查函数是否被击中吗如果被击中，你能用Chrome之类的东西检查div以确保它们有一个高度吗？还要更改css，使#center有一个高度：100%，并删除其他两个选项。你能让其他ppl看到什么吗？这是我的错误。他们必须在文档中的函数准备好后运行，并放置代码文件之外准备好了。我还没有告诉他们我想要25%-50%-25%。

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

<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%;
    }