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

朱雀 2023-01-18 04:13 203阅读 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 条评论，203人围观）

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

相关阅读

相关 CSS3--移动端自适应

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

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

相关 CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例

原文网址：[CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN] 简介本

深藏阁楼爱情的钟/ 2023年10月02日 17:00/ 0 赞/ 23 阅读

相关 flex 实现移动端上下固定，中间滑动

如果你还在用position:fixed来保持移动端顶部、下部的导航栏在全局固定位置不动。那你可以换种方法。更简单，方便，快捷；还不会受定位的影响。不过注意，使用fle

淩亂°似流年/ 2023年03月04日 06:37/ 0 赞/ 11 阅读

相关 uni-app 移动端高度自适应

uni-app宽度固定750rpx，一般都没问题那么高度怎么自适应呢？这里提供一种解决方案在App.vue的onLoad()里获取手机可用高度如下代码

悠悠/ 2023年02月24日 11:28/ 0 赞/ 25 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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