使 div 填充剩余屏幕空间的高度 [英] Make a div fill the height of the remaining screen space
问题描述
我正在开发一个 Web 应用程序，我希望内容填满整个屏幕的高度.
该页面有一个标题，其中包含一个徽标和帐户信息.这可以是任意高度.我希望内容 div 将页面的其余部分填充到底部.
我有一个标题 div 和一个内容 div.目前我正在使用表格进行布局，如下所示:
CSS 和 HTML
#page {高度:100%；宽度:100%}#tdcontent {高度:100%；}#内容 {溢出:自动；/* 或溢出:隐藏；*/}<tr><td id="tdheader"><div id="header">...</div></td></tr><tr><td id="tdcontent"><div id="内容">...</div></td></tr></table>页面的整个高度已填充，无需滚动.
对于内容 div 中的任何内容，设置 top: 0; 会将其放在标题下方.有时内容将是一个真实的表格，其高度设置为 100%.将 header 放在 content 中将不允许这样做.
有没有不用table也能达到同样效果的方法?
更新:
内容 div 中的元素的高度也将设置为百分比.所以 div 中 100% 的东西会填满它的底部.50% 的两个元素也是如此.
更新 2:
例如，如果标题占据屏幕高度的 20%，则在 #content 内指定为 50% 的表格将占据屏幕空间的 40%.到目前为止，将整个事物包装在一个表中是唯一有效的方法.
解决方案 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，您可以轻松地在具有固定尺寸、内容尺寸尺寸或剩余空间尺寸的任何行或列之间切换.在我的示例中，我将页眉设置为对齐其内容(根据 OP 问题)，我添加了一个页脚来展示如何添加固定高度区域，然后设置内容区域以填充剩余空间.
html,身体 {高度:100%；边距:0；}.盒子 {显示:弹性；弹性流:列；高度:100%；}.box .row {边框:1px 虚线灰色；}.box .row.header {弹性:0 1 自动；/* 以上是以下的简写:弹性增长:0，弹性收缩:1，弹性基础:自动*/}.box .row.content {弹性:1 1 自动；}.box .row.footer {弹性:0 1 40px；}
<!-- 显然，你可以使用 HTML5 标签，如 `header`、`footer` 和 `section` --><div class="box"><div class="行标题"><p><b>头部</b><br/><br/>(根据内容调整大小)</p>
<div class="行内容"><p><b>内容</b>(填充剩余空间)</p>
<div class="行页脚"><p><b>页脚</b>(固定高度)
在上面的 CSS 中，flex 属性是 flex-grow, flex-shrink 和 flex-基础属性来建立弹性项目的灵活性.Mozilla 有一个对灵活盒模型的很好的介绍.
I am working on a web application where I want the content to fill the height of the entire screen.
The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.
I have a header div and a content div. At the moment I am using a table for the layout like so:
CSS and 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>
The entire height of the page is filled, and no scrolling is required.
For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting header inside content will not allow this to work.
Is there a way to achieve the same effect without using the table?
Update:
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.
解决方案 2015 update: the flexbox approach
There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.
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)
All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.
To check current support you can also see here:
http://caniuse.com/#feat=flexbox
Working example
With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.
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>
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.
这篇关于使 div 填充剩余屏幕空间的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆