本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

当我只有 2 个孩子时,如何将 flexbox 孩子设置为父高度(100%)[重复]

发布于2021-12-03 00:24     阅读(59)     评论(0)     点赞(1)     收藏(1)


我正在尝试为我的 flex 孩子添加 100% 的高度。它不工作。我知道我给出了方向,row但有时我只有 2 个孩子需要设置 100% 的高度。

是否可以?如果是这样,正确的方法是什么?

这是我的尝试:

*{
  padding:0;
  margin:0;
}

.parent{
  display:flex;
  height:100%;
  background:lightgray;
  border:1px solid red;
  flex-direction:row;
}

.child1{
  flex:0 0 30%;
  overflow-y: auto;
  background:lightblue;
}
.child2{
  flex:0 0 70%;
  overflow-y: auto;
  background:lightyellow;
}
<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

现场演示


解决方案


您已将父高度设置为 100%。

您必须使用一些绝对单位设置高度。

检查下面的片段 100vh

*{
  padding:0;
  margin:0;
}
header{
  height:100px;      
  background:gray;
}
.parent{
  display:flex;
  height:calc(100vh - 65px);
  background:lightgray;
  border:1px solid red;
  flex-direction:row;
}

.child1{
  flex:0 0 30%;
  overflow-y: auto;
  background:lightblue;
}
.child2{
  flex:0 0 70%;
  overflow-y: auto;
  background:lightyellow;
}
<header>
  <h2>Header goes here</h2>
</header>
<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/246449/351a48155518fe03a5a0/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

1 0
收藏该文
已收藏

评论内容:(最多支持255个字符)