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

朱雀 2023-01-18 04:13 137阅读 0赞

## 问题描述： ##

移动端，手机显示界面，需要头部高度10vh,底部高度10vh,中间的高度自适应；

## 效果展示： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

## 代码： ##

<!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`该属性使用在对应父元素上，控制子元素分割展示；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: /images/20221021/b18d7f5df40846c3a0cf2605e580ddc6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3--移动端自适应

CSS单位 CSS中，单位分为两类： 1. **绝对单位**：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的； 2. **相对单位**：没有固定的...

偏执的太偏执、/ 2024年04月18日 23:15/ 0 赞/ 14 阅读

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

问题描述：移动端，手机显示界面，需要头部高度10vh,底部高度10vh,中间的高度自适应；效果展示： ![在这里插入图片描述][watermark_type_

朱雀/ 2023年01月18日 04:13/ 0 赞/ 138 阅读

相关 css实现上中下布局（上下固定，中间自适应）

先上效果图： ![在这里插入图片描述][20210421001710245.gif] 实现方法：方法一：这个最简单，利用css中vh单位和calc() 函数

深藏阁楼爱情的钟/ 2023年01月14日 14:58/ 0 赞/ 96 阅读

相关 CSS 实现两边固定中间自适应

1，flex 布局 .box{ height: 50px; width: 100%; display: flex;

悠悠/ 2023年01月13日 06:27/ 0 赞/ 207 阅读

相关 echarts移动端自适应

话说，我也是刚开始接触echarts图表，很多东西都不懂，没法上手操作。这不，在用echarts做图表完成两个后，在意识到一个问题。echarts移动端没有自适应。然后为

系统管理员/ 2022年11月28日 10:33/ 0 赞/ 147 阅读

相关 flex自适应的两种布局方式；上中下，左中右布局自适应；两端固定高度或者宽度，中间自适应的布局

上中下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

女爷i/ 2022年11月16日 15:14/ 0 赞/ 319 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 288 阅读

相关使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类

淩亂°似流年/ 2022年06月07日 14:10/ 0 赞/ 269 阅读

相关 css实现左边高度自适应右边高度

css样式： <style> .container { width: 960px;

一时失言乱红尘/ 2022年04月11日 14:07/ 0 赞/ 407 阅读

相关 css上下两栏布局（上栏固定下栏自适应）

1.效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

红太狼/ 2021年08月28日 18:17/ 0 赞/ 482 阅读