仅使用CSS,html元素如何填充剩余屏幕高度的100%?


118

我有一个header元素和一个content元素:

#header
#content

我希望标头具有固定的高度,并且内容要用填满屏幕上所有可用的剩余高度overflow-y: scroll;

没有Java,这可能吗?

Answers:


83

技巧是在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;
}

1
我尝试了所有解决方案,但是只有这样才能解决我的问题。
亚历克斯(Alex)

1
@Alex如果这适用于您要定位的所有浏览器,则一定要继续实施它。每个人的要求都不一样。
BentOnCoding '18

320

忘记所有答案了,这行CSS在2秒内为我工作了:

height:100vh;

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

资源

对于自适应布局缩放,您可能需要使用:

min-height: 100vh

[2018年11月更新] 如评论中所述,使用最小高度可能避免响应式设计出现问题

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


9
这是最简单的答案,因为您无需将所有父元素的高度都设置为100%。这是当前对vh的支持-caniuse.com/#feat=viewport-units-iOS显然可能需要解决方法,因为“据报道,iOS上的vh在高度计算中包括底部工具栏的高度”。
Brian Burns

2
哇,很好找到!用过于复杂的答案看待所有这些人。
NoName

8
当在2011年提出问题时,所有主流浏览器都不支持视口单元。那些“过于复杂的答案”是当时的唯一选择。
JJJ

6
次要建议a min-height: 100vh会好很多。它将同样适用于响应式设计。
Wiggy A.18年

3
这不能回答所问的问题,这将占用100%的视口。他不希望这样,因为他的标题将占据视口的x%,因此其他答案是正确的。
4cody

35

实际上最好的方法是这样的:

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

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

技术解决方案-编辑

从历史上看,与“宽度”相比,“高度”是最容易成型的难题。由于css专注于<body>样式工作。我们给了-上面的代码<html><body>高度。这就是神奇的地方-因为我们在游戏桌上有“最小高度”,我们要告诉浏览器<body>优于最小高度,<html>因为它<body>保持最小高度。反过来,由于具有更高的高度,因此允许<body>覆盖。换句话说,我们正在诱使浏览器“跳出桌子”,因此我们可以独立设置样式。<html><html><html>


1
哦,天哪,这是一个奇迹!
Geoff

就像奇迹一样,它起作用了!但是请:为什么min-heightheight
2015年

1
@ShaojiangCai-从历史上看,与“宽度”相比,“高度”是最棘手的事情。由于css专注于<body>样式工作。此代码:我们都给<html><body>高度。这就是神奇的地方-因为我们在游戏桌上有“最小身高”,我们要告诉服务器<body>优于最小身高,<html>因为<body>保持最小身高。反过来,由于具有更高的高度,因此允许<body>覆盖。换句话说,我们正在诱使服务器“撞到” 桌子,因此我们可以独立设置样式。<html><html><html>
法伦2015年

2
@Faron看来,“浏览器”将是一个更好的选择,而不是“服务器”。;)
LETs 2015年

@EunLeem ...我同意您如何选择正确的措辞来解决此问题。感谢您的“肘弯”技巧。相应地更新了我的答案。
法伦2015年

14

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

min-height: 100vh;

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

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

10

接受的解决方案实际上将无法工作。您会注意到,内容div将等于其父项的高度body。因此,将bodyheight 设置为100%会等于浏览器窗口的高度。假设浏览器窗口768px处于高度,通过将内容div高度设置为100%,其div高度将依次为768px。因此,您将以header div为主体,150px而content div为主体768px。最后,您将150px在页面底部下方找到内容。有关其他解决方案,请查看此链接。


8

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

当心使用百分比高度计算。除非所有父母的高度都已设定,否则Firefox无法正常使用。
TomDK

4

对我来说,下一个效果很好:

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

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

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

    </div>
</div>

我使用此参考用flexbox填充高度。CSS如下所示:

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

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



1

接受的答案不起作用。投票率最高的答案不能回答实际问题。使用固定的像素高度标头,并在浏览器的其余显示中填充文本,然后滚动进行下流。这是使用绝对定位的实际可行解决方案。我还假设通过问题中“固定标头”的声音知道标头的高度。我在这里以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停留在页面末尾。感谢您抽出宝贵的时间来解释它。
Armfoot

1
我很高兴它帮助了一个人;)
jumps4fun

1

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

height: 100vh;


1

请让我在这里加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.heightidContent.top调整为包括边界,并且如果不使用边界,则应具有相同的值。否则,元素将退出视口,因为计算的宽度不包括边框,边距和/或填充。
  • left:0; right:0;width:100%如果没有使用边框,则可以出于相同的原因将其替换。
  • 在单独的页面(而不是摘要)中进行测试不需要任何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>


0

除非您需要支持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;}



-1

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

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.