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

【问题标题】：How can an html element fill out 100% of the remaining screen height, using css only?html 元素如何仅使用 css 填充 100% 的剩余屏幕高度？
【发布时间】：2011-11-13 13:01:20
【问题描述】：

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

#header
#content

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

没有 Javascript 这可能吗？

【问题讨论】：

标签： html css

【解决方案1】：

忘记所有答案，这行 CSS 在 2 秒内对我有用：

height:100vh;

1vh = 浏览器屏幕高度的 1%

source

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

min-height: 100vh

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

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

【讨论】：

这是最简单的答案，因为您不需要将所有父元素的高度设置为 100%。这是当前对 vh 的支持 - caniuse.com/#feat=viewport-units - iOS 显然可能需要一种解决方法，因为“据报道，iOS 上的 vh 在高度计算中包括底部工具栏的高度”。
哇，不错的发现！看看所有这些回答过于复杂的人。
当这个问题在 2011 年被问到时，主流浏览器都不支持视口单元。那些“过于复杂的答案”是当时唯一的选择。
建议min-height: 100vh 会好很多。它也适用于响应式设计。
这不能回答所提出的问题，这将占用 100% 的视口。他不希望这样，因为他的标题将占据视口的 x %，因此其他答案是正确的。

【解决方案2】：

这样做的诀窍是在 html 和 body 元素上指定 100% 的高度。一些浏览器查看父元素（html、body）来计算高度。

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

【讨论】：

我尝试了所有解决方案，但只有 this 解决了我的问题。
@Alex 如果这适用于您所针对的所有浏览器，那么一定要继续实施它。每个人的要求都不一样。

【解决方案3】：

其实最好的办法是这样的：

html { 
    height:100%;
}
body { 
    min-height:100%;
}

这为我解决了所有问题，它可以帮助我控制页脚，并且无论页面是否向下滚动，它都可以有固定的页脚。

技术解决方案 - 已编辑

从历史上看，与“宽度”相比，“高度”是最容易塑造的东西。由于 css 专注于 <body> 以使样式生效。上面的代码 - 我们给了<html> 和<body> 一个高度。这就是魔法出现的地方——因为我们在游戏桌上有“最小高度”，我们告诉浏览器<body> 优于<html>，因为<body> 拥有最小高度。这反过来又允许<body> 覆盖<html>，因为<html> 的高度已经更早了。换句话说，我们是在欺骗浏览器将<html> 从桌面上“弹出”，因此我们可以独立设置样式。

【讨论】：

天哪，这真是个奇迹！
就像奇迹一样，它起作用了！但是请：为什么min-height 和height？
@ShaojiangCai - 从历史上看，与最简单的“宽度”相比，“高度”是很难塑造的。由于 css 专注于 <body> 以使样式生效。这段代码：我们给<html> 和<body> 一个高度。这就是魔法出现的地方——因为我们在桌上有“最小高度”，我们告诉服务器<body> 优于<html>，因为<body> 拥有最小高度。这反过来又允许<body> 覆盖<html>，因为<html> 的高度已经更早了。换句话说，我们正在欺骗服务器将<html> 从桌面上“撞”出，因此我们可以独立设置样式。
@Faron 看起来“浏览器”在这里会比“服务器”更好。 ;)
@EunLeem ...我同意你的观点，我可以选择正确的措辞来解决这个问题。感谢您的“肘部撞击”提示。相应地更新了我的答案。

【解决方案4】：

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

min-height: 100vh;

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

使用 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：

<header>blabablalba </header>
<section> Content </section>

【讨论】：

小心在百分比高度上使用 calc。除非所有父母都设置了高度，否则 Firefox 将无法正常工作。

【解决方案7】：

对我来说，下一个效果很好：

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

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

我用这个reference 用弹性框填充高度。 CSS 是这样的：

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

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

【讨论】：

【解决方案8】：

请让我在这里加上我的 5 美分并提供一个经典的解决方案：

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

这适用于所有浏览器，没有脚本，没有 flex。在全屏模式下打开 sn-p 并调整浏览器大小：即使在全屏模式下也会保留所需的比例。

注意：

不同背景颜色的元素实际上可以覆盖彼此。这里我使用了实心边框来确保放置元素正确。
idHeader.height 和 idContent.top 调整为包含边框，如果不使用边框，则应该具有相同的值。否则元素将拉出视口，因为计算的宽度确实不包括边框、边距和/或内边距。
left:0; right:0; 可以替换为 width:100% 相同原因，如果没有使用边框。
在单独的页面中进行测试（不是作为 sn-p）不需要任何 html/body 调整。
在 IE6 及更早版本中，我们必须添加 padding-top 和/或 padding-bottom 属性为 #idOuter 元素。

为了完成我的回答，这里是页脚布局：

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

这是带有页眉和页脚的布局：

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

【讨论】：

【解决方案9】：

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

请务必将 html 和正文的高度也设置为 100%。

【讨论】：

不鼓励仅链接的答案。请尝试在您的答案中总结链接内容

【解决方案10】：

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

HTML：

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</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 中的实际内容，请查看此 jsfiddle，使用引导行和列。

【讨论】：

"固定像素高度标头" -> 这正是！ bottom 属性确保#Content 停留在页面末尾。感谢您花时间解释它。
我很高兴它帮助了某人；）

【解决方案11】：

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

height: 100vh;

【讨论】：

【解决方案12】：

除非你需要支持 IE 9 及以下版本，否则我会使用 flexbox

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

你还需要让body填满整个页面

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

【讨论】：

【解决方案13】：

CSS PLaY | cross browser fixed header/footer/centered single column layout

CSS Frames, version 2: Example 2, specified width | 456 Berea Street

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

【讨论】：

不鼓励仅链接的答案。尝试在答案中包含代码。

【解决方案14】：

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

【讨论】：

【解决方案15】：

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

html 文件

<div id="contents"></div>
<div id="footer"></div>

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');
});

【讨论】：

【解决方案16】：

你尝试过这样的事情吗？

CSS：

.content {
    height: 100%;
    display: block;
}

HTML：

<div class=".content">
<!-- Content goes here -->
</div>

【讨论】：