Question

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

#header
#content

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

这可能没有Javascript吗？

Answer 1

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

height:100vh;

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

source

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

min-height: 100vh

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

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

Answer 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;
}

Answer 3

实际上最好的方法就是：

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

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

技术解决方案 - 已编辑

从历史上看，“高度”是一个难以塑造的东西，与“宽度”相比，最简单。因为css专注于<body>以便样式工作。上面的代码 - 我们给了<html>和<body>一个高度。这就是魔术进入画面的地方 - 因为我们在桌面上有'最小高度'，我们告诉浏览器<body>优于<html>因为<body>保持最小高度。这反过来允许<body>覆盖<html>，因为<html>已经具有较高的高度。换句话说，我们正在欺骗浏览器将<html>从表中“甩掉”，因此我们可以独立设置样式。

Answer 4

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

Answer 5

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

Answer 6

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

min-height: 100vh;

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

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

Answer 7

请让我在这里加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进行了调整，以包括边框，如果未使用border，则应具有相同的值。除此以外元素将拉出视口，因为计算出的宽度确实不包括边框，边距和/或填充。
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>

Answer 8

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

我将标头和内容包装在div中

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

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

    </div>
</div>

我用这个reference用flexbox填充了高度。 CSS像这样：

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

有关flexbox技术的详细信息，请访问reference

Answer 9

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

HTML：

state

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

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

要更详细地了解这是如何工作的，使用#Header { height: 150px; width: 100%; background-color: #ddd; } #Content { position: absolute; width: 100%; top: 150px; bottom: 0; background-color: #aaa; overflow-y: scroll; }中的实际内容，使用引导行和列来查看此jsfiddle。

Answer 10

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

height: 100vh;

Answer 11

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

确保html和body的高度也设置为100％。

Answer 12

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

Answer 13

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

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

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

Answer 14

非常简单：

#content {
    max-height: 100%;
}

Answer 15

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

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

Answer 16

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

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

Answer 17

你尝试过这样的事吗？

CSS：

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

HTML：

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

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

17 个答案:

注意：

html文件

css文件

js文件（使用jquery）