我正在开发一个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也将高度设置为百分比。因此，100％内部的东西div将填充到底部。两个元素也是50％。更新2：例如，如果标题占据屏幕高度的20％，则内部指定为50％的表#content将占用屏幕空间的40％。到目前为止，将整个事物包装在表中是唯一有效的方法。使div填充剩余屏幕空间的高度
4 回答
九州编程
TA贡献1785条经验 获得超4个赞
您可以使用CSS表，而不是使用标记中的表。
标记
<body>
<div>hello </div>
<div>there</div>
</body>
（相关）CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
这种方法的一些优点是：
1）减少标记
2）标记比表更具语义，因为这不是表格数据。
3）浏览器支持非常好：IE8 +，所有现代浏览器和移动设备（caniuse）
为了完整起见，这里是CSS表模型的等效Html元素到css属性
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 }
- 4 回答
- 0 关注
- 4144 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消