我正在開發(fā)一個Web應(yīng)用程序，我希望內(nèi)容能夠填滿整個屏幕的高度。該頁面有一個標題，其中包含徽標和帳戶信息。這可以是任意高度。我希望內(nèi)容div將頁面的其余部分填充到底部。我有標題div和內(nèi)容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>頁面的整個高度都已填滿，無需滾動。對于內(nèi)容div中的任何內(nèi)容，設(shè)置top: 0;將把它放在標題下面。有時內(nèi)容將是一個真實的桌子，其高度設(shè)置為100％。放在header里面content不會允許這個工作。有沒有辦法在不使用的情況下達到相同的效果table？更新：內(nèi)容中的元素div也將高度設(shè)置為百分比。因此，100％內(nèi)部的東西div將填充到底部。兩個元素也是50％。更新2：例如，如果標題占據(jù)屏幕高度的20％，則內(nèi)部指定為50％的表#content將占用屏幕空間的40％。到目前為止，將整個事物包裝在表中是唯一有效的方法。使div填充剩余屏幕空間的高度
4 回答
九州編程
TA貢獻1785條經(jīng)驗 獲得超4個贊
您可以使用CSS表，而不是使用標記中的表。
標記
<body>
<div>hello </div>
<div>there</div>
</body>
（相關(guān)）CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
這種方法的一些優(yōu)點是：
1）減少標記
2）標記比表更具語義，因為這不是表格數(shù)據(jù)。
3）瀏覽器支持非常好：IE8 +，所有現(xiàn)代瀏覽器和移動設(shè)備（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 }
添加回答
舉報
0/150
提交
取消