html元素如何仅使用css填充剩余屏幕高度的100％？

我有一个标题元素和一个内容元素：

#header

#content

我希望标题具有固定的高度，并且内容可以填满屏幕上可用的所有剩余高度，使用overflow-y: scroll;。

这可能没有Javascript？

Harry asked 2019-04-12T17:37:27Z

15个解决方案

211 votes

忘了所有的答案，这行CSS在2秒内为我工作：

height:100vh;

vmax =浏览器屏幕高度的1％

资源

对于响应式布局缩放，您可能希望使用：

min-height: 100vh

[2018年11月更新]正如评论中所提到的，使用最小高度可能会避免在响应式设计上出现问题

[更新于2018年4月]如评论中所述，早在2011年提出问题时，并非所有浏览器都支持视口单元。其他答案是当时的解决方案 - 在IE中仍然不支持vmax，因此这可能不是所有人的最佳解决方案。

Sebastien H. answered 2019-04-12T17:38:44Z

67 votes

这方面的技巧是在html和body元素上指定100％的高度。有些浏览器会查看父元素(html，body)来计算高度。

html, body

{

height: 100%;

}

#Header

{

width: 960px;

height: 150px;

}

#Content

{

height: 100%;

width: 960px;

}

BentOnCoding answered 2019-04-12T17:37:38Z

31 votes

实际上最好的方法是：

html {

height:100%;

}

body {

min-height:100%;

}

这解决了我的一切，它帮助我控制我的页脚，无论页面是否向下滚动，它都可以有固定的页脚。

技术解决方案 - 已编辑

从历史上看，与“宽度”相比，“高度”是一个难以理解的东西，最简单。 由于css专注于

进行造型工作。 上面的代码 - 我们给了和一个高度。 这是魔术进入画面的地方 - 因为我们在比赛桌上有'min-height'，我们告诉浏览器优于，因为保持最小高度。 这反过来允许覆盖，因为的高度已经提前。 换句话说，我们正在欺骗浏览器从表中“撞”，所以我们可以独立设计。

Faron answered 2019-04-12T17:39:44Z

8 votes

接受的解决方案实际上不起作用。您会注意到内容div将等于其父级body的高度。因此，将body高度设置为100%会将其设置为等于浏览器窗口的高度。 假设浏览器窗口的高度为768px，通过将内容div的高度设置为100%,div的高度将依次为768px。因此，最终标题div为150px，内容div为768px。最后 您将在页面底部下方找到内容150px。 有关其他解决方案，请查看此链接。

dykstrad answered 2019-04-12T17:40:18Z

6 votes

使用HTML5，您可以这样做：

CSS：

body, html{ width:100%; height:100%; padding: 0; margin: 0;}

header{ width:100%; height: 70px; }

section{ width: 100%; height: calc(100% - 70px);}

HTML：

blabablalba

Content

Miguel answered 2019-04-12T17:40:54Z

2 votes

您可以在min-height属性上使用vh。

min-height: 100vh;

您可以执行以下操作，具体取决于您使用边距的方式...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

Almeida Cavalcante answered 2019-04-12T17:41:34Z

2 votes

对我来说，下一个运作良好：

我将标题和内容包装在div上

我用这个引用用flexbox填充高度。 CSS是这样的：

.main-wrapper {

display: flex;

flex-direction: column;

min-height: 100vh;

}

.header {

flex: 1;

}

.content {

flex: 1;

}

有关flexbox技术的更多信息，请访问参考

hasher answered 2019-04-12T17:42:30Z

1 votes

您也可以将父级设置为display: inline.参见[http://codepen.io/tommymarshall/pen/cECyH]

一定要将html和body的高度设置为100％。

tommymarshall answered 2019-04-12T17:43:12Z

1 votes

在这种情况下，我希望我的主要内容div是液体高度，以便整个页面占用浏览器高度的100％。

height: 100vh;

Fezal halai answered 2019-04-12T17:43:54Z

0 votes

除非您需要支持IE 9及更低版本，否则我会使用flexbox

body { display: flex; flex-direction: column; }

.header { height: 70px; }

.content { flex: 1 1 0 }

你还需要让身体填满整个页面

body, html{ width:100%; height:100%; padding: 0; margin: 0;}

James Lambert answered 2019-04-12T17:44:34Z

0 votes

CSS PLaY | 跨浏览器固定页眉/页脚/居中单列布局

CSS框架，版本2：示例2，指定宽度| 456 Berea Street

一个重要的事情是虽然这听起来很容易，但是你的CSS文件会有相当多的丑陋代码来获得这样的效果。 不幸的是，它确实是唯一的选择。

Joe answered 2019-04-12T17:45:25Z

0 votes

接受的答案不起作用。 最高投票的答案并不能回答实际问题。 使用固定的像素高度标题，并在浏览器的剩余显示中填充，并滚动以进行功率流。 这是一个使用绝对定位实际工作的解决方案。 我还假设通过问题中“固定标题”的声音知道标题的高度。 我在这里使用150px作为例子：

HTML：

CSS :(仅为视觉效果添加背景色)

#Header

{

height: 150px;

width: 100%;

background-color: #ddd;

}

#Content

{

position: absolute;

width: 100%;

top: 150px;

bottom: 0;

background-color: #aaa;

overflow-y: scroll;

}

有关其工作原理的详细信息，请参阅#Content中的实际内容，使用bootstrap行和列查看此jsfiddle。

KjetilNordin answered 2019-04-12T17:46:19Z

0 votes

非常简单：

#content {

max-height: 100%;

}

Masood Aslami answered 2019-04-12T17:46:51Z

-1 votes

到目前为止，我找到的最佳解决方案是在页面底部设置页脚元素，然后评估页脚偏移量与我们需要展开的元素之间的差异。例如

html文件

css文件

#footer {

position: fixed;

bottom: 0;

width: 100%;

}

js文件(使用jquery)

var contents = $('#contents');

var footer = $('#footer');

contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

您可能还想更新每个窗口调整大小的内容元素的高度，所以...

$(window).on('resize', function() {

contents.css('height', (footer.offset().top -contents.offset().top) + 'px');

});

Αλέκος answered 2019-04-12T17:48:00Z

-3 votes

你尝试过这样的事吗？

CSS：

.content {

height: 100%;

display: block;

}

HTML：

Rahul Choudhary answered 2019-04-12T17:48:39Z