一个 html 元素如何只使用 css 填充剩余屏幕高度的100% ？

小开

你试过这种方法吗？

CSS:

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

HTML:

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

小开

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

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

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

小开

最佳答案

这样做的诀窍是在 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;
}

小开

被接受的解决方案实际上不会起作用。您将注意到内容 div将等于其父级 body的高度。因此，将 body高度设置为 100%将使其等于浏览器窗口的高度。假设浏览器窗口的高度是 768px，通过将内容 div的高度设置为 100%，div的高度依次为 768px。因此，最终的头 div 是 150px，而内容 div 是 768px。最后，你将有内容 150px下面的页面底部。另一个解决方案，查看 < a href = “ https://web.archive. org/web/20130502123937/http://ryanfait.com/resources/footer-stick-to-bottom-of-page/”rel = “ norefrer”> 这个链接。

小开

实际上，最好的办法是:

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

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

技术解决方案-编辑

从历史上看，“高度”是很难塑造的东西，相比之下，“宽度”是最容易塑造的。因为 css 的重点是 <body>的样式工作。上面的代码-我们给 <html>和 <body>一个高度。这就是魔术进入图片-因为我们有’最小高度’在游戏桌上，我们告诉浏览器，<body>是优于 <html>，因为 <body>持有最小高度。这反过来又允许 <body>覆盖 <html>，因为 <html>的高度已经提前了。换句话说，我们正在欺骗浏览器“撞”表的 <html>，所以我们可以独立的样式。

小开

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

小开

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

还要确保将 html 和 body 的高度设置为100% 。

小开

到目前为止，我发现的最佳解决方案是在页面底部设置一个 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');

您可能还希望在每次调整窗口大小时更新 content 元素的高度，所以..。

$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

小开

忘记所有的答案，这行 CSS 为我工作在2秒钟:

height:100vh;

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

来源

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

min-height: 100vh

[2018年11月更新] 正如在评论中提到的，使用 min-height 可以避免在响应式设计上出现问题

[更新2018年4月] 正如评论中提到的，回到2011年问题被提出的时候，并不是所有的浏览器都支持视窗单元。其他的答案是当时的解决方案—— IE 仍然不支持 vmax，所以这可能还不是最好的解决方案。

小开

除非你需要支持 IE9及以下版本，否则我会使用 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;}

小开

公认的答案不起作用。得票最高的答案并不能回答实际的问题。具有固定的像素高度标头，并在剩余的浏览器显示填充器，并滚动以获得溢出。这里有一个实际可行的解决方案，使用绝对定位。我还假设标题的高度是已知的，通过问题中“固定标题”的声音。我在这里用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。

小开

在这个例子中，我希望我的主要内容 div 是液体高度，以便整个页面占用100% 的浏览器高度。

height: 100vh;

小开

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

min-height: 100vh;

您可以按照以下方式进行操作，这取决于您如何使用边距..。

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

小开

对我来说，下一步很有效:

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

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


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


</div>
</div>

我用这个参考文献来填充柔性箱的高度。 CSS 是这样的:

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

更多关于柔性盒技术的信息，请访问参考文献

小开

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


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

小开

请允许我在这里加上我的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>

这将工作在所有的浏览器，没有脚本，没有弹性。在全页模式下打开代码片段并调整浏览器的大小: 即使在全屏模式下也保留了所需的比例。

注:

具有不同背景颜色的元素实际上可以覆盖在这里，我使用了实心边框来确保元素的放置正确。
idHeader.height和 idContent.top调整为包括边界, 如果不使用边框，则应该具有相同的值。否则元素将从视窗中拉出，因为计算的宽度会这样做不包括边框、边距及/或填充物。
同样，left:0; right:0;也可以被 width:100%所取代理由，如果没有使用边框。
在单独的页面(而不是作为代码片段)中进行测试不需要任何 Html/body 调整。
在 IE6和早期版本中，我们必须添加 padding-top和/或属性设置为 #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>