让一个 div 填充剩余屏幕空间的高度

【问题标题】：让一个 div 填充剩余屏幕空间的高度
【发布时间】：2010-09-10 13:11:56
【问题描述】：

我正在开发一个 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>

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

对于内容 div 中的任何内容，设置 top: 0; 会将其放在标题下方。有时内容将是一个真实的表格，其高度设置为 100%。将header 放入content 将无法正常工作。

有没有办法不用table也能达到同样的效果？

更新：

内容div 中的元素也将高度设置为百分比。因此，div 中 100% 的内容会将其填充到底部。 50% 的两个元素也是如此。

更新 2：

例如，如果标题占据屏幕高度的 20%，则在 #content 内指定为 50% 的表格将占用 40% 的屏幕空间。到目前为止，将整个内容包装在一个表格中是唯一可行的方法。

【问题讨论】：

  • 对于以后在这里磕磕绊绊的人，您可以在大多数浏览器中获得所需的表格布局，无需表格标记，通过使用display:table 和相关属性，请参阅this answer 非常类似的问题。
  • 我已尝试重新创建您的设置 - jsfiddle.net/ceELs - 但它不起作用，我错过了什么？
  • @Mr.外星人的回答简单实用，看看http://stackoverflow.com/a/23323175/188784
  • 其实你的描述是行不通的，即使是表格：如果内容占用的垂直空间大于屏幕高度，表格单元格和整个表格将扩展超出屏幕底部。您的内容溢出：自动不会出现滚动条。
  • @GillBates 它会在你指定父元素的高度后工作看jsfiddle.net/ceELs/5

标签： html css html-table


【解决方案1】： 
<!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>

在所有正常的浏览器中，您可以将“标题”div 放在内容之前，作为同级，相同的 CSS 将起作用。但是，如果在这种情况下浮动为 100%，则 IE7- 不会正确解释高度，因此标题需要在内容中，如上所述。 overflow: auto 会在 IE 上造成双滚动条（它总是让视口滚动条可见，但禁用），但没有它，如果溢出，内容将被剪辑。

【讨论】：

    【解决方案2】：

    在 CSS 中确实没有一种可靠的跨浏览器方式来执行此操作。假设您的布局很复杂，您需要使用 JavaScript 来设置元素的高度。你需要做的实质是：

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

    一旦您可以获取此值并设置元素的高度，您需要将事件处理程序附加到窗口 onload 和 onresize 以便您可以触发调整大小函数。

    另外，假设你的内容可能比视口大，你需要设置overflow-y来滚动。

    【讨论】：

    • 这就是我的怀疑。但是，该应用程序也可以在关闭 Javascript 的情况下运行，所以我想我会继续使用该表格。
    • 文森特，站稳脚跟。我一直想做同样的事情，但用 css 似乎不可能？我不确定，但无论如何其他大量解决方案都没有按照您的描述进行。 javascript 是目前唯一可以正常工作的。
    【解决方案3】：

    文森特，我会用你的新要求再次回答。由于您不关心内容是否太长而被隐藏，因此您不需要浮动标题。只需将溢出隐藏在 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>

    【讨论】：

      【解决方案4】：

      我也一直在寻找这个问题的答案。如果你有幸能够针对 IE8 及以上版本，可以使用display:table 和相关值来获取包含 div 在内的块级元素的表格的呈现规则。

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

      【讨论】：

        【解决方案5】：

        我为此苦苦挣扎了一段时间，结果如下：

        由于很容易使内容 DIV 与父级高度相同，但显然很难使其父级高度减去标题高度，我决定将内容 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%;
}

        【讨论】：

        • 不知道表头高度怎么办？
        【解决方案6】：

        它从来没有像 NICCAI 在第一个答案中建议的那样使用 JavaScript 以其他方式为我工作。我正在使用这种方法通过谷歌地图重新调整&lt;div&gt;。

        这里是如何做到这一点的完整示例（适用于 Safari/FireFox/IE/iPhone/Andorid（适用于旋转））：

        CSS

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

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

        JS

        function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

        HTML

        <body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>

        【讨论】：

          【解决方案7】：

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

          padding-bottom: 100%;

          【讨论】：

          • 100% 什么？如果我尝试这个，我会得到一个巨大的空白空间并开始滚动。
          【解决方案8】：

          原来的帖子是 3 年前的。我想很多像我一样来看这篇文章的人都在寻找类似应用程序的布局解决方案，比如说以某种方式固定的页眉、页脚和占据其余屏幕的全高内容。如果是这样，这篇文章可能会有所帮助，它适用于 IE7+ 等。

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

          以下是该帖子中的一些 sn-ps：

          @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>

          【讨论】：

          • 这里只有一个问题：页眉和页脚不是自动调整大小的。 那是真正的困难，而那就是为什么“这不可能”的答案目前在顶部...
          【解决方案9】：

          为什么不这样呢？

          html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

          给你 html 和 body（按这个顺序）一个高度，然后只给你的元素一个高度？

          为我工作

          【讨论】：

            【解决方案10】：

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

            【讨论】：

              【解决方案11】：

              试试这个

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

              【讨论】：

                【解决方案12】：

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

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

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

                2020 年更新：所有现代浏览器都支持display: flex 和display: grid。唯一缺少的是对 subgrid 的支持，它仅受 Firefox 支持。请注意，规范不支持 MSIE，但如果您愿意添加特定于 MSIE 的 CSS hack，则可以使其正常运行。我建议直接忽略 MSIE，因为即使微软也表示不应该再使用它。 Microsoft Edge 很好地支持这些功能（除了子网格支持，因为它与 Chrome 共享 Blink 渲染引擎）。

                使用display: grid的示例：

                html, body
{
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body
{
  display: grid;
  grid:
    "myheader" auto
    "mymain" minmax(0,1fr)
    "myfooter" auto /
    minmax(10rem, 90rem);
}

header
{
  grid-area: myheader;
  background: yellow;
}

main
{
  grid-area: mymain;
  background: pink;
  align-self: center
    /* or stretch
      + display: flex;
      + flex-direction: column;
      + justify-content: center; */
}

footer
{
  grid-area: myfooter;
  background: cyan;
}
                <header>Header content</header>
<main>Main content which should be centered and the content length may change.
<details><summary>Collapsible content</summary>
<p>Here's some text to cause more vertical space to be used.</p>
<p>Here's some text to cause more vertical space to be used (2).</p>
<p>Here's some text to cause more vertical space to be used (3).</p>
<p>Here's some text to cause more vertical space to be used (4).</p>
<p>Here's some text to cause more vertical space to be used (5).</p>
</details>
</main>
<footer>Footer content</footer>

                使用display: flex的示例：

                html, body
{
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

body
{
  display: flex; 
}

main
{
  background: pink;
  align-self: center;
}
                <main>Main content which should be centered and the content length may change.
<details><summary>Collapsible content</summary>
<p>Here's some text to cause more vertical space to be used.</p>
<p>Here's some text to cause more vertical space to be used (2).</p>
<p>Here's some text to cause more vertical space to be used (3).</p>
<p>Here's some text to cause more vertical space to be used (4).</p>
<p>Here's some text to cause more vertical space to be used (5).</p>
</details>
</main>

                【讨论】：

                • 你能添加一个使用 flexbox/grid 的例子吗？
                • 我添加了使用grid 和flex 的示例。请注意，如果足以满足您的需求，display:flex 通常更易于使用。 display:grid 的好处在于您可以使用逻辑网格区域名称并仅更改 grid 属性以根据需要切换布局，而无需重新排序元素顺序。请注意，Chrome 不支持subgrid，如果您想要嵌套布局，这会使事情变得容易得多。您应该根据可访问性需求对元素进行排序，而不是根据视觉顺序。
                • 请注意，您可以在父元素中使用align-items 或align-content 而不是align-self。如果内容包装，它们之间的区别与包装的项目有关。
                【解决方案13】：

                您可以使用 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)

                为了完整起见，这里是与The CSS table model 的 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 }

                【讨论】：

                  【解决方案14】：

                  您实际上可以使用display: table 将区域拆分为两个元素（标题和内容），其中标题的高度可以不同，而内容会填充剩余空间。这适用于整个页面，以及当区域只是另一个元素的内容时，position 设置为 relative、absolute 或 fixed。只要父元素的高度不为零，它就可以工作。

                  See this fiddle 以及下面的代码：

                  CSS：

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

                  HTML：

                  <div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

                  【讨论】：

                    【解决方案15】：

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

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

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

                    Demo

                    假定标记和你的 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>

                    所以在这里，我正在做的是，将元素的高度相加，而不是使用 calc() 函数从 100% 中扣除。

                    只要确保您对父元素使用height: 100%;。

                    【讨论】：

                    • OP 说标题可以是任意高度。因此，如果您事先不知道高度，您将无法使用 calc :(
                    【解决方案16】：

                    2015 年更新：flexbox 方法

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

                    注意：尽管 CSS 灵活框布局规范处于候选推荐阶段，但并非所有浏览器都实现了它。 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 shim。

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

                    工作示例

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

                    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 属性，以建立弹性项目的灵活性。 Mozilla 有一个good introduction to the flexible boxes model。

                    【讨论】：

                    • 为什么 flex: 0 1 30px; 中的 flex: 0 1 30px; 属性在每个 div 中都会被覆盖？
                    • 这是浏览器对 flexbox 的支持 - 很高兴看到所有绿色 - caniuse.com/#feat=flexbox
                    • 绝对是一个非常好的方法，而且几乎可以工作；）当 div.content 的内容超过原始的 flex-ed 高度时，会出现一个小问题。在当前的实现中，“页脚”将被推低，这不是开发人员所期望的；）所以我做了一个非常简单的修复。 jsfiddle.net/przemcio/xLhLuzf9/3 我在容器和溢出滚动上添加了额外的 flex。
                    • 具有透明度的导航栏不起作用。 rgba 中的 alpha 通道完全没有效果，固定的页眉/页脚只能有纯色背景。
                    【解决方案17】：

                    这完全可以由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

                    【讨论】：

                      【解决方案18】：

                      当您需要在内容太高时滚动底部 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>

                      Original source: Filling the Remaining Height of a Container While Handling Overflow in CSS

                      JSFiddle live preview

                      【讨论】：

                        【解决方案19】：

                        一个简单的解决方案，使用 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 sample

                        An alternate solution, with a div centered within the content div

                        【讨论】：

                          【解决方案20】：

                          CSS3 简单方法

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

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

                          【讨论】：

                            【解决方案21】：

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

                            这样，我就不需要玩弄显示或定位了。这在使用 Bootstrap 制作仪表板时派上了用场，其中我有一个侧边栏和一个主栏。我希望 main 拉伸并填充整个垂直空间，以便我可以应用背景颜色。

                            div {
    height: 100vh;
}

                            支持 IE9 及以上版本：click to see the link

                            【讨论】：

                            • 但是 100vh 听起来像是所有的高度，而不是剩余的高度。如果你有一个标题，然后你想填充其余部分怎么办
                            【解决方案22】：

                            免责声明：接受的答案给出了解决方案的想法，但我发现它带有不必要的包装器和 css 规则有点臃肿。下面是一个css规则很少的解决方案。

                            HTML 5

                            <body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

                            CSS

                            body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

                            上述解决方案使用 viewport units 和 flexbox，因此是 IE10+，前提是您使用 IE10 的旧语法。

                            可使用的 Codepen：link to codepen

                            或者这个，对于那些需要在内容溢出时滚动主容器的人：link to codepen

                            【讨论】：

                            • 主{高度：10px;弹性：1；溢出：自动}
                            【解决方案23】：

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

                            【讨论】：

                              【解决方案24】：

                              衍生出异形先生的想法……

                              这似乎比流行的用于支持 CSS3 的浏览器的弹性框更简洁。

                              只需将 min-height（而不是 height）与 calc() 一起用于内容块。

                              calc() 从 100% 开始，减去页眉和页脚的高度（需要包括填充值）

                              使用“min-height”而不是“height”特别有用，因此它可以与 javascript 呈现的内容和 Angular2 等 JS 框架一起使用。否则，一旦 javascript 呈现的内容可见，计算将不会将页脚推到页面底部。

                              这是一个使用 50 像素高度和 20 像素内边距的页眉和页脚的简单示例。

                              HTML：

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

                              CSS：

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

                              当然，数学可以简化，但你明白了......

                              【讨论】：

                                【解决方案25】：

                                我遇到了同样的问题，但我无法使用上面的 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>

                                【讨论】：

                                  【解决方案26】：

                                  它是动态计算屏幕空间的，最好使用Javascript。

                                  您可以使用 CSS-IN-JS 技术，如下库：

                                  https://github.com/cssobj/cssobj

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

                                  【讨论】：

                                    【解决方案27】：

                                    对于移动应用，我只使用 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/

                                    【讨论】：

                                      【解决方案28】：

                                      你在 CSS 中使用vh 代表view height 怎么样...

                                      看看下面我为你创建的代码sn-p并运行它：

                                      body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
                                      <div class="full-height">
</div>

                                      另外，看看下面我为你创建的图片：

                                      【讨论】：

                                      • 只有当你想让一个 div 跨越窗口的整个高度时才好。现在在其上方放置一个高度未知的标题 div。
                                      【解决方案29】：

                                      CSS Grid Solution

                                      只需使用display:grid 定义body，使用auto 和fr 值属性定义grid-template-rows。

                                      * {
  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>

                                      A Complete Guide to Grids @ CSS-Tricks.com

                                      【讨论】：

                                      • 是的。它现在得到了广泛的支持，因此没有理由以另一种方式来做
                                      【解决方案30】： 
                                       style="height:100vh"

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

                                      【讨论】：

                                        猜你喜欢
                                        • 2010-09-10
                                        • 1970-01-01
                                        • 1970-01-01
                                        • 1970-01-01
                                        相关资源
                                        最近更新 更多
                                        热门标签
                                        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode