使div填充剩余屏幕空间的高度

JimLEYSam2020-03-13

我正在一个Web应用程序上工作，我希望其中的内容能填满整个屏幕的高度。

该页面具有标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。

我有一个标题div和一个内容div。目前，我正在使用表格进行布局，如下所示：

CSS和HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

页面的整个高度已填满，不需要滚动。

对于content div中的任何内容，设置top: 0;将其放在标题的正下方。有时，内容将是一个实际表，其高度设置为100％。把header里面content不会让这种工作。

是否有一种无需使用即可达到相同效果的方法table？

更新：

Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.

Update 2:

For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.

卡卡西Near2020/03/13 17:17:29

通过Bootstrap：

CSS样式：

html, body {
    height: 100%;
}

1）仅填充剩余屏幕空间的高度：

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

2）填充剩余屏幕空间的高度并将内容与父元素的中间对齐：

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

GO2020/03/13 17:17:29

分拆外星人的想法...

与启用CSS3的浏览器流行的flex box相比，这似乎是一种更干净的解决方案。

只需对内容块使用带有calc（）的min-height（而不是height）。

calc（）以100％开头，并减去页眉和页脚的高度（需要包括填充值）

使用“最小高度”代替“高度”特别有用，因此它可以与javascript呈现的内容和Angular2之类的JS框架一起使用。否则，一旦显示了javascript呈现的内容，该计算就不会将页脚推到页面的底部。

这是使用50px高度和20px填充的页眉和页脚的简单示例。

HTML：

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

CSS：

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

当然，数学可以简化，但是您可以理解...

老丝镜风2020/03/13 17:17:29

我找到了一个非常简单的解决方案，因为对我来说这只是一个设计问题。我希望页面的其余部分不要在红色页脚下方为白色。因此，我将页面背景色设置为红色。并将内容backgroundcolor更改为白色。内容高度设置为例如。20em或50％几乎是空白的页面不会使整个页面变成红色。

DavaidTony宝儿2020/03/13 17:17:29

它是动态计算刷新屏幕空间的工具，使用Javascript更好。

您可以使用CSS-IN-JS技术，如以下lib所示：

https://github.com/cssobj/cssobj

演示：https : //cssobj.github.io/cssobj-demo/

理查德凯2020/03/13 17:17:29

我遇到了同样的问题，但是我无法使用上面的flexboxes解决方案。因此，我创建了自己的模板，其中包括：

具有固定大小元素的标题
页脚
带有滚动条的边栏占据了剩余的高度
内容

我使用了flexbox，但是以一种更简单的方式，只使用了display属性：flex和flex-direction：row | column：

我确实使用angular，并且希望组件尺寸为其父元素的100％。

关键是为所有父母设置尺寸（以百分比为单位），以限制其尺寸。在以下示例中，myapp高度具有100％的视口。

主要组件具有90％的视口，因为页眉和页脚具有5％。

我在这里发布了模板：https：//jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

HTML：

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

JinJin凯梅2020/03/13 17:17:28

对于移动应用程序，我仅使用VH和VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

演示-https: //jsfiddle.net/u763ck92/

小小西里2020/03/13 17:17:28

尝试这个

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

A小卤蛋Pro2020/03/13 17:17:28

 style="height:100vh"

为我解决了问题。就我而言，我将此应用于所需的div

Jim老丝梅2020/03/13 17:17:28

Vincent，我将根据您的新要求再次回答。由于您不关心内容是否太长而被隐藏，因此不需要浮动标题。只需将溢出隐藏在html和body标签上，并将#content高度设置为100％。内容将始终比视口长标题的高度，但是它将被隐藏并且不会引起滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

YOC644217922020/03/13 17:17:28

CSS网格解决方案

仅定义bodywith display:grid和grid-template-rowsusing auto和frvalue属性。

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

网格的完整指南@ CSS-Tricks.com

Davaid神无2020/03/13 17:17:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

在所有理智的浏览器中，您可以将“ header” div作为同级内容放置在内容之前，并且相同的CSS将起作用。但是，在这种情况下，如果float为100％，则IE7-不能正确解释高度，因此，如上所述，标头必须为IN内容。溢出：自动将导致IE上的双滚动条（始终具有可见的视口滚动条，但已禁用），但如果没有它，则内容将在溢出时被裁剪。

小哥Gil2020/03/13 17:17:28

我为此花了一段时间，最后得到以下结果：

由于很容易使内容DIV与父对象的高度相同，但显然很难使它的父高度减去标题高度，因此我决定使content div变为全高，但将其绝对定位在左上角，然后定义一个填充对于具有标题高度的顶部。这样，内容将在标题下方整齐显示，并填充整个剩余空间：

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

凯十三2020/03/13 17:17:28

现在有很多答案，但是我发现使用height: 100vh;div元素需要填补整个可用的垂直空间。

这样，我就不需要玩弄显示或定位。在使用Bootstrap制作仪表板（其中有一个侧边栏和一个主菜单）时，这很方便。我希望主体延伸并填充整个垂直空间，以便可以应用背景色。

div {
    height: 100vh;
}

支持IE9及更高版本：单击以查看链接

蛋蛋斯丁2020/03/13 17:17:28

如果您可以处理不支持旧版本浏览器（即MSIE 9或更早版本）的情况，则可以使用已经是W3C CR的Flexible Box Layout Module来实现。该模块还允许其他不错的技巧，例如重新排序内容。

不幸的是，MSIE 9或更低版本不支持此功能，并且您必须为除Firefox之外的所有浏览器的CSS属性使用供应商前缀。希望其他供应商也尽快删除该前缀。

另一个选择是CSS Grid Layout，但对稳定版本的浏览器的支持甚至更少。实际上，只有MSIE 10支持此功能。

乐小小2020/03/13 17:17:28

对我有用的（在其他所有情况下都假定一个div位于另一个div中）是将底部填充设置为100％。也就是说，将其添加到您的CSS /样式表：

padding-bottom: 100%;

A小胖2020/03/13 17:17:28

当内容太高时，需要底部div滚动时，所有发布的解决方案都无法正常工作。在这种情况下，以下解决方案有效：

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

原始来源：在处理CSS溢出时填充容器的剩余高度

JSFiddle实时预览

梅米亚2020/03/13 17:17:28

CSS3简单方法

height: calc(100% - 10px); // 10px is height of your first div...

如今，所有主流浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。

飞云Jim梅2020/03/13 17:17:28

一个简单的解决方案，使用flexbox：

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

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

Codepen样本

一种替代解决方案，其div居于内容div的中心

EvaGil2020/03/13 17:17:28

可以完全通过CSS使用vh以下命令来完成：

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

和 HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

我查了一下它，它可以在所有主要的浏览器：Chrome，IE，和FireFox

StafanHarry2020/03/13 17:17:28

我也一直在寻找答案。如果您有幸能够定位IE8及更高版本，则可以使用display:table和相关值来获取具有div等块级元素的表的渲染规则。

如果您更加幸运，并且您的用户使用的是顶级浏览器（例如，如果这是您控制的计算机上的Intranet应用程序，例如我的最新项目），则可以在CSS3中使用新的Flexible Box Layout！

LEYJim2020/03/13 17:17:28

怎么样，你只需使用vh它代表view height在CSS ...

在下面查看我为您创建的代码片段，然后运行它：

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

另外，请看下面为您创建的图像：

前端前端猴子2020/03/13 17:17:28

用过的： height: calc(100vh - 110px);

码：

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }

<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

十三番长2020/03/13 17:17:28

在CSS中，确实没有声音，跨浏览器的方式可以做到这一点。假设布局复杂，则需要使用JavaScript设置元素的高度。您需要做的实质是：

Element Height = Viewport height - element.offset.top - desired bottom margin

一旦获得此值并设置元素的高度，就需要将事件处理程序附加到窗口的onload和onresize上，以便可以激发您的resize函数。

另外，假设您的内容可能大于视口，则需要将overflow-y设置为滚动。

Itachi猪猪Green2020/03/13 17:17:28

您可以使用CSS表来代替在标记中使用表。

标记

<body>    
    <div>hello </div>
    <div>there</div>
</body>

（相关）CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1和 FIDDLE2

此方法的一些优点是：

1）减少标记

2）标记比表更具语义，因为它不是表格数据。

3）浏览器支持非常好：IE8 +，所有现代浏览器和移动设备（caniuse）

为了完整起见，这是CSS表格模型的 CSS属性的等效Html元素

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

蛋蛋Tom2020/03/13 17:17:28

仅CSS方法（如果高度已知/固定）

当您希望中间元素垂直跨越整个页面时，可以使用calc()CSS3中引入的元素。

假设我们具有固定的高度 header和footer元素，并且我们希望section标签采用整个可用的垂直高度...

演示版

假设标记和CSS应该是

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

So here, what am doing is, adding up the height of elements and than deducting from 100% using calc() function.

Just make sure that you use height: 100%; for the parent elements.

阳光猿2020/03/13 17:17:28

最初的帖子已经超过3年了。我猜想像我这样来此帖子的很多人都在寻找类似应用程序的布局解决方案，比如说固定的页眉，页脚和全高内容占用了其余屏幕。如果是这样，这篇文章可能会有所帮助，它适用于IE7 +等。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

以下是该帖子的一些摘要：

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}

<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

小小TomNear2020/03/13 17:17:28

2015年更新：Flexbox方法

还有两个简短提及flexbox的答案；但是，那是两年多以前的事了，他们没有提供任何示例。flexbox的规范现在肯定已经确定。

注意：尽管CSS Flexible Boxes Layout规范处于候选推荐标准阶段，但并非所有浏览器都已实现。WebKit实现必须以-webkit-为前缀；Internet Explorer实现了规范的旧版本，并带有-ms-前缀。Opera 12.10实施了该规范的最新版本，没有前缀。有关最新兼容性状态，请参见每个属性的兼容性表。

（摘自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes）

所有主要的浏览器和IE11 +都支持Flexbox。对于IE 10或更早版本，可以使用FlexieJS填充程序。

要查看当前支持，您还可以在此处查看：http : //caniuse.com/#feat=flexbox

工作实例

使用flexbox，您可以轻松地在具有固定尺寸，内容尺寸尺寸或剩余空间尺寸的任何行或列之间进行切换。在我的示例中，我设置了页眉以使其与内容对齐（按照OP问题），添加了页脚以显示如何添加固定高度的区域，然后设置内容区域以填充剩余的空间。

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

在上面的CSS中，flex属性是flex-grow，flex-shrink和flex-basis属性的简写形式，以建立flex项目的灵活性。Mozilla 很好地介绍了弹性盒模型。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer