css上半部分自适应高度，下半部分自动填充竖向排列

淩亂°似流年 2022-12-26 09:14 95阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70][]

把一个页面一份成2部分，上面的表单不是固定的，所以不能设置固定盖度，但是下面还需要填充满。我碰到的问题是下面没有填充满，出来补个div白色背景这与我想要的效果不一样

弹性盒的功能很强大，思路就是一个大盒子包含2个小盒子，给大盒子设置成弹性盒，然后给上半部分用flex-shrink，下面用flex-grow就解决啦~~~

上代码，哈哈哈哈

/* 外面盒子 */
    .app{
      height: calc(100vh - 50px);
      display: flex; // 重点
      flex-direction: column; // 重点
    }
    /* body上部 */
    .app-top{
      background-color: #F5F6FA;
      flex-shrink: 0; // 重点
      .app-inner{
        padding: 2%;
        background-color: #ffffff;
        border-radius: 0 0 50px 0;
      }
    }
    /* body下部 */
    .app-bottom{
      padding: 2%;
      background-color: #F5F6FA;
      border-radius: 50px 0 0 0;
      flex-grow: 1;  // 重点
      display: flex;
      flex-direction: column;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70]: /images/20221120/0c8e8c07e33b447793f231fff4adfe5f.png

发表评论取消回复

表情：

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

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

相关阅读

相关 LeetCode——半有序排列

一、题目 [2717. 半有序排列 - 力扣（Leetcode）][2717. _ - _Leetcode] 给你一个下标从 0 开始、长度为 `n` 的整数排列 `n

古城微笑少年丶/ 2023年10月12日 13:54/ 0 赞/ 77 阅读

相关 javaSE - 认识字符串（String class）上半部分

前言 > 字符串: > 在C语言里面是没有字符串类型的！ > 但是，在 Java 和 C++ 里，有字符串类型【String】什么是字符串？什么是字符？

深藏阁楼爱情的钟/ 2023年10月08日 17:21/ 0 赞/ 42 阅读

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

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

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

相关 css上半部分自适应高度，下半部分自动填充竖向排列

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

淩亂°似流年/ 2022年12月26日 09:14/ 0 赞/ 96 阅读

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

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

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

相关 java--IO流（后半部分）

1.打印流 PrintWriter(Writerout) 打印输出流，针对于字符 @Test public void test() throws IOExceptio

布满荆棘的人生/ 2022年06月03日 03:50/ 0 赞/ 179 阅读

相关 java--IO流（前半部分）

package Files; import java.io.BufferedInputStream; import java.io.BufferedOutp

拼搏现实的明天。/ 2022年06月03日 03:49/ 0 赞/ 200 阅读

相关 div 自适应高度自动填充剩余高度

概述：记录一下，别人已经写得比较好了，下次方便检索地址：[http://www.cnblogs.com/pangguoming/p/5695184.html][htt

深藏阁楼爱情的钟/ 2022年05月18日 04:53/ 0 赞/ 326 阅读

相关网页部分内容（左下侧）自适应

div位于网页的左侧靠边，顶部有一定距离 //左侧自适应 fixHeight\_m=fixedHeight()+1;//!important 浮动元素高度 var t

缺乏、安全感/ 2022年04月18日 03:38/ 0 赞/ 283 阅读

相关 div自适应高度, 超出部分出现滚动条

1. 问题 1. 通过 height 设置百分比的方式, 可以自适应高度, 但是不会出现滚动条. 2. 固定值 height 会出现滚动条, 但是各种屏幕的高度不能

た入场券/ 2021年09月17日 23:44/ 0 赞/ 1352 阅读