當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3动画---移动端上下固定高度，中间自适应

發布時間：2023/12/31 CSS 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3动画---移动端上下固定高度，中间自适应小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

問題描述：

移動端，手機顯示界面，需要頭部高度10vh,底部高度10vh,中間的高度自適應；

效果展示：

代碼：

<!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該屬性使用在對應父元素上，控制子元素分割展示；

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS3动画---移动端上下固定高度，中间自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

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