我正在开发一个 Web 应用程序,我希望内容填满整个屏幕的高度。
该页面有一个标题,其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。
我有一个 headerdiv和一个 content 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不会让这个工作。
top: 0;
header
content
有没有办法在不使用的情况下达到相同的效果table?
table
更新:
内容中的元素div也将高度设置为百分比。因此,内部 100% 的东西div会将其填充到底部。50% 的两个元素也是如此。
更新 2:
例如,如果标题占据屏幕高度的 20%,则在 50% 内部指定的表格#content将占用 40% 的屏幕空间。到目前为止,将整个东西包装在一张桌子上是唯一有效的方法。
#content
还有另外两个答案简要提到了 flexbox;但是,那是两年多以前的事了,他们没有提供任何示例。flexbox 的规范现在已经确定了。
注意:虽然 CSS 灵活框布局规范处于候选推荐阶段,但并非所有浏览器都实现了它。WebKit 实现必须以 -webkit- 为前缀;Internet Explorer 实现了旧版本的规范,前缀为 -ms-;Opera 12.10 实现了最新版本的规范,没有前缀。有关最新的兼容性状态,请参阅每个属性的兼容性表。 (取自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
注意:虽然 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>