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

小编典典

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

html

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

更新：

内容内的元素的div高度也将设置为百分比。因此，内部100％的内容div将填充到底部。两个元素占50％。

更新2：

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

阅读 793

2020-05-10

共1个答案

小编典典

2015年更新：Flexbox方法

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

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

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

工作实例

使用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 很好地介绍了弹性盒模型。

2020-05-10