首页 > 其他分享 >父元素flex:1 子元素height:100%

父元素flex:1 子元素height:100%

时间:2023-10-11 14:23:41浏览次数:35  
标签:box flex direction 100% 元素 height

    <style>
        .box{
            display: flex;
            flex-direction: column;
            overflow: hidden;  //只要不是auto
        }
        .parent{
            flex: 1;
            min-height: 0;  //or height:0
        }
        .children{
            height: 100%;  //可正常继承
        }
    </style>
    <div class="box">
      <div></div>
      <div class="parent">
          <div class="children">
          </div>
      </div>
    </div>

标签:box,flex,direction,100%,元素,height
From: https://www.cnblogs.com/qieting/p/17756979.html

相关文章

  • Flex布局的三个属性要深刻理解!
    在我们日常开发中,flex布局可以说是家常便饭,对于很多的我们来说(你懂得^_^),可能我们用的比较多的应该就是垂直居中里,也就是下面这段代码:.flex-box{display:flex;justify-content:center;align-items:center;}写的非常好(^_^)!然后我们都知道这个是定义在父元素的,布局效果是......
  • 为什么 CSS flex 布局中没有 `justify-items` 和 `justify-self`?
    为什么CSSflex布局中没有justify-items和justify-self?为什么在CSSflex布局中存在align-items和align-self,却没有justify-items和justify-self呢?要解答这个问题,首先需要理解主轴(mainaxis)和交叉轴(crossaxis)之间的差异。1.主轴和交叉轴的区别在没有折行的情况......
  • 冲刺只能跑100米 漫步却能走一万步或一万米
    飘风不终朝 骤雨不终日。意思就是说,狂风不会刮一个早晨,暴雨也不会下一整天。真正能够长久下去的,是梅雨季节的绵绵细雨。努力,不应该是一种时刻需要提醒自己去做的事情,而是一种早已嵌入生活中的习惯。短暂地刻意奔跑,只会迅速消耗完你的精神能量,然后让你迅速变得萎靡不振。相信......
  • 使用jquery的html()判断Table元素为空时的bug
    在使用jquery的html()函数判断接点为空时从服务器端取数据,不为空时则不再取数据,这样减少与服务器的交互。使用元素<divid="test"></div>使用if(!$("#test").html())判断没有问题使用<tableid="test"></table>时出现问题,判断时总不为空,用alert($("#t......
  • 表单元素的enctype属性
    表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值:1)application/x-www-form-urlencoded:这是默认编码方式,它只处理表单域里的value属性值,采用这种编码方式的表单会将表单域的值处理成URL编码方式。2)multipart/form-data:这种编码方式的表......
  • 231009校内赛
    T1里群题解阴间第一题题目中有一个很明显的建图方法就是对于第\(i\)天入群的人在第\(j\)天退群那么就在\(i,j\)之间连一条边首先有一个结论,管理员个数不大于\(3\)对于这个结论,证明如下:首先第一次删除出现后就一定需要两个管理员了如果某次删除只删掉了某一个管理......
  • 移除ID名为id_name的元素和id置空
    1、移除ID名为id_name的元素varx=document.getElementById("id_name");//如果对象x不为空if(x!=null)x.remove();对于selectObject.remove(index)方法,以select元素为例,若指定index,则只删除其中的某一项;若不指定index,则删除整个select元素。2、移除Class名为class_name......
  • LY1376 [ 20231008 NOIP 模拟赛 T0 ] 递增路径
    题意\(A\),\(B\)两人轮流在一张图上移动一个点。要求这次移动的边权必须大于上次的。\(A\)希望游戏进行的轮数多,\(B\)希望游戏进行的轮数少。对于每个\(s=1,2,...,n\)作为起点,若双方都采用最优策略,游戏会进行多少轮。Sol考虑将所有边按照从大到小的顺序排序。每......
  • winget 0x8051100f错误
    解决WinGet0x8051100f错误接手了公司旧的电脑,安装的是精简版的Windows10系统,今天在准备使用winget的时候发现并没有安装。然而这台电脑精简的有点过分了,连MicrosoftStore都没有,装好WinGet之后发现执行的时候居然还会报错0x8a15000f错误。解决方案遇到错误0x8a15000f时,按照以......
  • 【分享】影刀使用xpath捕获指定的元素
    xpath捕获元素比较精准,前面也介绍了xpath的用法现在捕获社区里帖子详情页的标题//*[@class='discuss_detail_header___3LhnQ']/h1找到class是discuss_detail_header___3LhnQ的子元素h1获取文章内容//*[@id='w-e-textarea-1']找到id是w-e-textarea-1的元素获取元素......