html div剩下高度设置,使div填充剩余屏幕空间的高度
生活随笔
收集整理的這篇文章主要介紹了
html div剩下高度设置,使div填充剩余屏幕空间的高度
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
使用flexbox，您可以輕松地在具有固定尺寸，內(nèi)容大小尺寸或剩余空間尺寸的任何行或列之間切換。在我的示例中，我已將標題設(shè)置為與其內(nèi)容對齊(根據(jù)OPs問題)，我添加了一個頁腳以顯示如何添加固定高度區(qū)域，然后設(shè)置內(nèi)容區(qū)域以填充剩余空間。
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)
總結(jié)
以上是生活随笔為你收集整理的html div剩下高度设置,使div填充剩余屏幕空间的高度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小白html图片添加文字,小白爬虫入门—
- 下一篇： 微型计算机地未来发展,微型计算机的发展历