CSS3动画---移动端上下固定高度，中间自适应
生活随笔
收集整理的這篇文章主要介紹了
CSS3动画---移动端上下固定高度，中间自适应
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
問題描述：
移動(dòng)端，手機(jī)顯示界面，需要頭部高度10vh,底部高度10vh,中間的高度自適應(yīng)；
效果展示：
代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {width: 100vw;height: 100vh;display: grid;grid-template-rows: 10vh 1fr 10vh;}.content {background: red;}</style> </head><body><div></div><div class="content"></div><div></div> </body></html>解釋：
使用柵格布局，grid-template-row該屬性使用在對(duì)應(yīng)父元素上，控制子元素分割展示；
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的CSS3动画---移动端上下固定高度，中间自适应的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 王者荣耀猴子冰脉流出装
- 下一篇： CSS position 属性