所以我有一个页面标题栏，高度为150px。在该区域下，我希望另一个DIV可以填充整个屏幕以及屏幕底部的剩余空间（宽度和高度）。我尝试为DIV设置height: 100%，但是这会使屏幕变得可滚动，并且我只希望它填充页面的其余部分。注意：没有页脚或下面的任何内容。
可以使用jQuery / Javascript，但最好使用纯CSS（如果可能）。如果使用jQuery，请说明将其实现到页面中的正确方法（我假设$(function() {...});位于头部的<style>标记下。
我尝试过搜索结果，但是似乎没有任何正常工作。
最佳答案
tl; dr我基本上为您提供了3个选择。请点击以下段落中的“像这样”，以查看它们的外观（没有任何文字）。单击A）。 B）。和C）。下方段落中的链接，以查看三个选项之间的区别。检查每个滚动如何不同，我保证它们都是不同的。看完所有这三个之后，您可以阅读所需的实现方式。 （也就是说，如果您喜欢其中任何一个。）希望您喜欢它，如果不喜欢，没问题：）
我会尝试一下，因为坦白地说，这取决于您要做什么，因为有多种方法可以查看它，并且取决于最终目标。我将介绍三种可能的情况：（在没有文本的情况下，它们看起来都是一样的，like this，但是如果您想查看它们的文本外观，请单击字母。确保滚动页面以查看它们之间的区别） ）
（仅作为旁注，我基于A）。和B）。 Twitter Bootstrap的操作方式。）
A).您只希望它看起来像一个div在另一个顶部（header div在主要内容div顶部）并显示那样，但是如果第二个div的文本溢出，您仍然希望页面滚动。在此实现中，当他们滚动时，会将标题移出视图，但是如果您不希望标题div移出视图，则会导致我
B).与main-content div顶部的第一个标头div相同，但是当它们滚动时，标头div仍将留在顶部，而不是移出视线。
最后，
C).您确实希望div延伸到屏幕底部，并且永远不要让整个页面都有滚动条。在某些情况下可以使用它，例如，Spotify用这种样式制作了一个不错的音乐应用程序，这样您就不必滚动整个页面，而只需滚动页面中的窗格即可。
好的，所以这里首先是用于构造所有这三个代码的html代码
<body>
<div class="header"></div>
<div class="main-content"></div>
</body>
现在到有趣的部分...
我将为以下示例提供一个小提琴，并使用CSS将必要的代码放在顶部，而将不必要的代码放在底部。 （html可能包含一些不必要的文本，因此请忽略该文本。我只希望您看到页面在这三个页面上的滚动方式有所不同。）
一种）。
无需重新说明它是什么，所以我只向您显示必要的代码。
首先，here is A). without the text以便您可以看到其他内容，直到内容变得太大为止。
Here is the fiddle加上文字，以便您查看其区别。
这是A）的必要CSS。 （背景颜色不是完全必要的，但要指出这一点是一定必要的。）
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
现在为...
B）。
首先，here is B). without the text以便您可以看到其他内容，直到内容变得太大为止。
Here is the fiddle加上文字，以便您查看其区别。
这是B）的必要CSS。
body {
padding-top: 150px;
background-color: #ddd;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
如您所知，唯一的区别是.header上的
position: fixed，但请查看两个示例以了解其区别。现在最后所有C）。，
C）。
首先，here is C). without the text以便您可以看到其他内容，直到内容变得太大为止。
Here is the fiddle带有文本，以便您可以看到它的不同之处，并且我将调用选项1，其中有一个滚动条专门针对该区域的溢出内容。
Here is the fiddle带有文本，以便您可以看到它的不同之处，并使用选项2来隐藏溢出的内容。 （这确实是一种不好的做法，我不会这样做。因此，如果我建议的话，我会选择C的选项1。）
这是C的必要CSS。
body {
padding-top: 150px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background-color: #676767;
}
.main-content {
position: fixed;
top: 150px;
left: 0;
right: 0;
bottom: 0;
background-color: #ddd;
}
我不会解释，但这是关于定位的an article。
这是选项1唯一需要的CSS，是将
overflow-y: auto添加到.main-content，但是如果您想使用选项2，我不建议您可以在overflow-y: hidden上使用.main-content好吧，这就是我的帖子，对于大多数人来说，如果让我感到无聊，可能会很抱歉，但是我只是想提供帮助。希望您能找到想要的布局。这只是旧版CSS可能的布局的几个示例。如果您没有获得所需的布局，请随时通过下面的评论向我发送消息，我很乐意在某个时候答复它。希望这会有所帮助。如果不是，那也很好。 :)
关于javascript - DIV高度为另一个div下剩余空间的100％，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22029606/