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

标签 html css html-table

我正在开发一个 Web 应用程序,我希望其中的内容填满整个屏幕的高度。

该页面有一个标题,其中包含 Logo 和帐户信息。这可以是任意高度。我希望内容 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%。到目前为止,将整个内容包装在一个表中是唯一可行的方法。

最佳答案

2015 年更新:flexbox 方法

还有另外两个答案简要提及 flexbox ;然而,那是两年多以前的事了,他们没有提供任何例子。 flexbox 的规范现在已经确定了。

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

所有主流浏览器和 IE11+ 都支持 Flexbox。对于 IE 10 或更早版本,您可以使用 FlexieJS shim。

要查看当前支持,您还可以在此处查看: 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 元素的灵 active 。 Mozilla 有一个 good introduction to the flexible boxes model .

关于html - 让一个div填充剩余屏幕空间的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58437312/

相关文章:

html - 如何让行内 block 元素直接打印?

xhtml - 为 html 表放置脚注的首选方法是什么?

jquery - 更改 td 内的纯文本的一部分

html - 我正在尝试修复 html 表格的高度,但遇到困难

javascript - JQuery Ascensor JS 插件不工作

javascript - AngularJS - 将配置参数传递给指令

javascript - 在带有缩回地址栏的移动浏览器中使用全高

javascript - jQuery - 在 jqueryUI 对话框中获取点击位置

jquery - HTML 图像未在 chrome 中显示,并且 jQuery 更改在 IE 中不起作用

javascript - 如何在 iframe 中插入表格?