Answers:
技巧是在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;
}
忘记所有答案了,这行CSS在2秒内为我工作了:
height:100vh;
1vh
=浏览器屏幕高度的1%
对于自适应布局缩放,您可能需要使用:
min-height: 100vh
[2018年11月更新] 如评论中所述,使用最小高度可能避免响应式设计出现问题
[更新于2018年4月]正如评论中提到的,早在2011年被问到这个问题时,并不是所有的浏览器都支持视口单元。其他答案是当时的解决方案-IE vmax
中仍不支持该解决方案,因此这可能不是所有解决方案的最佳解决方案。
min-height: 100vh
会好很多。它将同样适用于响应式设计。
实际上最好的方法是这样的:
html {
height:100%;
}
body {
min-height:100%;
}
这可以为我解决所有问题,并且可以帮助我控制页脚,并且无论页面是否向下滚动,页脚都可以固定。
技术解决方案-编辑
从历史上看,与“宽度”相比,“高度”是最容易成型的难题。由于css专注于<body>
样式工作。我们给了-上面的代码<html>
和<body>
高度。这就是神奇的地方-因为我们在游戏桌上有“最小高度”,我们要告诉浏览器<body>
优于最小高度,<html>
因为它<body>
保持最小高度。反过来,由于具有更高的高度,因此允许<body>
覆盖。换句话说,我们正在诱使浏览器“跳出桌子”,因此我们可以独立设置样式。<html>
<html>
<html>
min-height
和height
?
<body>
样式工作。此代码:我们都给<html>
与<body>
高度。这就是神奇的地方-因为我们在游戏桌上有“最小身高”,我们要告诉服务器<body>
优于最小身高,<html>
因为<body>
保持最小身高。反过来,由于具有更高的高度,因此允许<body>
覆盖。换句话说,我们正在诱使服务器“撞到” 桌子,因此我们可以独立设置样式。<html>
<html>
<html>
您可以在min-height属性上使用vh。
min-height: 100vh;
您可以执行以下操作,具体取决于您使用边距的方式...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
您还可以将父级设置为display: inline
。参见http://codepen.io/tommymarshall/pen/cECyH
还要确保还将html和body的高度设置为100%。
接受的答案不起作用。投票率最高的答案不能回答实际问题。使用固定的像素高度标头,并在浏览器的其余显示中填充文本,然后滚动进行下流。这是使用绝对定位的实际可行解决方案。我还假设通过问题中“固定标头”的声音知道标头的高度。我在这里以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
停留在页面末尾。感谢您抽出宝贵的时间来解释它。
请让我在这里加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。在全页模式下打开代码段并调整浏览器大小:即使在全屏模式下,也可以保留所需的比例。
idHeader.height
和idContent.top
调整为包括边界,并且如果不使用边界,则应具有相同的值。否则,元素将退出视口,因为计算的宽度不包括边框,边距和/或填充。left:0; right:0;
width:100%
如果没有使用边框,则可以出于相同的原因将其替换。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>
CSS PLaY | 跨浏览器固定的页眉/页脚/居中单列布局
重要的一点是,尽管这听起来很简单,但在CSS文件中会有很多难看的代码才能获得这样的效果。不幸的是,这确实是唯一的选择。
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
到目前为止,我发现的最佳解决方案是在页面底部设置页脚元素,然后评估页脚偏移量与我们需要扩展的元素之间的差异。例如
<div id="contents"></div>
<div id="footer"></div>
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
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:
.content {
height: 100%;
display: block;
}
HTML:
<div class=".content">
<!-- Content goes here -->
</div>