Question

所以我有一个标题栏，用于制作高度为150px的页面。在那个区域下，我想要另一个DIV来填充整个屏幕和屏幕底部的剩余空间（宽度和高度）。我已经尝试为DIV设置height: 100%，但这会导致屏幕变得可滚动，我只希望它填充页面的其余部分。注意：下面没有页脚或任何内容。

使用jQuery / Javascript是可以接受的，但仅限CSS（如果可能）。如果使用jQuery，请解释将其实现到页面中的正确方法（我假设$(function() {...});位于头部<style>标记下。{/ p>

我之前尝试过搜索结果，但似乎无法正常工作。

Answer 1

您可以尝试css3 flexbox。

http://jsfiddle.net/wL9aM/1/

.container {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  height: 700px;
}
.header {
  height: 200px;
  background: red;
}
.main {
  -webkit-flex: 1;
          flex: 1;
  background: blue;
}

Answer 2

tl; dr 我基本上为你做了三个选择。点击下面段落中的“喜欢这个”，看看它们看起来没有任何文字。点击A）。 B）。和C）。以下段落中的链接，以查看三个选项之间的差异。检查每个人如何以不同的方式滚动，我保证会有所不同。看完这三个之后，你就可以看到你想要的那个是如何实现的。（如果你喜欢他们中的任何一个。）希望你喜欢它，如果你不喜欢它没问题：）

我会对此有所了解，因为它真的取决于你有多种方法来查看它后面的内容，这取决于你的最终目标。我将介绍三种可能的情况:(所有看起来都一样，没有文字记住你，like this，但是如果你想看到它们的样子，请点击字母。确保滚动页面以查看差异他们之间。）

（正如我基于A的旁注）。和B）。关闭Twitter Bootstrap如何做到。）

A). 你只是希望它看起来像一个div在另一个上面（主要内容div顶部的标题div）并显示如此，但你仍然想要如果第二个div的文本溢出，则滚动页面。在这个实现中，当他们滚动时会将标题移出视图，但是如果你不希望标题div移出视图而导致我

B). 与主内容div顶部的第一个标头div相同，但是当它们滚动时，标题div仍将保留在顶部而不是移出视图

最后，
C). 您确实希望div延伸到屏幕底部，并且永远不会有整个页面的滚动条。这可以在某些情况下使用，例如，Spotify使用这种风格制作一个不错的音乐应用程序，这样你就不会只在页面中滚动整个页面。

好的，首先这里是用于构建所有三个

的html代码

<body>
  <div class="header"></div>
  <div class="main-content"></div>
</body>

现在到了有趣的部分......

我将为以下示例提供一个小提琴，使用css，我将把必要的代码放在顶部，将不必要的代码放在底部。（html可能有一些不必要的文本，所以请忽略它。我只是希望你看到页面在三个页面上的滚动方式不同。）

A）。

无需重新说明它是什么，所以我只会向您展示必要的代码。

首先，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布局的几个例子。如果您没有从这个或任何其他帖子获得您想要的布局，请通过下面的评论向我发送消息，我很乐意回答它。希望这有帮助。如果不是那样也没关系。：）

Answer 3

尝试使用脚本..

var window_h = $(window).height();
var header_h = $("header").height(); //This is what you said you had 150px

$(".filler_div").height(window_h - header_h);

您也可以将它放在一个函数（）中，以便在调整浏览器大小时也可以添加它，填充空间也可以调整...

function setfillerDivHeight(){
   //the code above
}

$(document).ready(function(){
    setFillerDivHeight(); //the initial setting of height
});

$(window).resize(function(){
    setFillerDivHeight(); //reapply setting of height when window resizes
});

Answer 4

<div class="full-page-height-wrapper">
  <header></header>
  <main></main>
</div>


html,body {
  height: 100%;
  margin: 0;
}
header {
  height: 150px;
}
.full-page-height-wrapper {
  min-height: 100%;
  position: relative;
}

代码：http://fiddle.jshell.net/N7zJg/9/

预览：http://fiddle.jshell.net/N7zJg/9/show/

Answer 5

我认为你不能在纯CSS中实现这一点。

所以，有两种不同的解决方案：

1）您可以将150px div放入100% div。

2）您可以使用jQuery执行此操作：

如果您的最高div是<div id="A">而第二个<div id="B">，那么您将拥有：

var b = $("#B");
var height = $("body").height() - b.position().top;
b.css({ height: height });

如果您有一些边距，请随意调整代码。

Answer 6

终于找到了解决方案。这样做会使设计更具响应性（因为我选择在底部添加一些东西），它会自动调整div的高度。

.container {
    display: table;
}
.row {
    display: table-row;
}
.column {
    display: table-column;
}
#fullDiv {
    height: 100%;
}

Answer 7

我找到了两个解决方案。一个是我必须将div设置在绝对位置。 div漂浮在屏幕上。另一个是使用表格行显示。

Answer 8

如果您只使用CSS，则无法通过为div提供100％的高度来完成任务。因为基本上CSS正在做的是为你的DIV提供100％的高度，并给出150 px以上的标题。考虑给予DIV的高度小于100％或某些静态值，例如600px或700px。

Alternate正在拥有一个DIV类，最小高度为100％，并在其内部放置你的头部和身体。

另一个div下剩余空间的DIV高度为100％

8 个答案:

A）。

B）。

C）。