使用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;

}

header

(sized to content)

content

(fills remaining space)

footer (fixed height)

總結

以上是生活随笔為你收集整理的html div剩下高度设置,使div填充剩余屏幕空间的高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。