带flex的Flexbox：1个孩子和100个孩子的孙子

如何解决带flex的Flexbox：1个孩子和100个孩子的孙子

想象一下这种情况：用flexbox创建一个简单的3行布局，中间的行填充了所有可用空间。很标准的东西。

<body>
   <div class="container">
        <div class="flex-container">
            <div>header</div>
            <div class="content">
                <div class="item red">asdasd</div>
                <div class="item yellow">asdasd</div>
                <div class="item green">asdasd</div>
            </div>
            <div>footer</div>
        </div>
   <div>
<body>

这里是CSS：

html,body,.container {
    height: 100%;
}

.flex-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flex-container .content {
    flex: 1;
}

.flex-container .content .item {
    height: 100%;
}

（省略CSS作为背景色，您可以猜到）。

问题是“内容” div不会将页脚div向下推，而是将其保持在页面底部，就像position：fixed与bottom：0一样。滚动页面显示（除此问题外）的正确行为，即3 div的不同颜色都将浏览器窗口的大小设置为100％。

我缺少什么？

编辑：看看这个jsfiddle https://jsfiddle.net/rq1xywng/

解决方法

我不确定您要寻找什么。可能会对您有帮助。

html,body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  min-height: 100vh;
}

.container {
  height: 100vh;
  min-height: 100vh;
  background-color: fuchsia;
}
.header,.footer {
  height: 30px;
}

.flex-container .content {
  display: flex;
  height: 100%;
  height: calc(100vh - 60px);
}

.flex-container .content .item {
  width: 100%;
  height: 100%;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

<div class="container">
  <div class="flex-container">
    <div class="header">header</div>
    <div class="content">
      <div class="item red">asdasd</div>
      <div class="item yellow">asdasd</div>
      <div class="item green">asdasd</div>
    </div>
    <div class="footer">footer</div>
  </div>
  <div>

所以您在这里有几个错误：

您将“容器”中的“每个项目”设置为100％-总计为300％：）
他们的父母“只有” 100％
除非指定高度，否则页脚将被隐藏
您以不健康的方式使用了vh和％。

您应该具有2个flex组件：

.flex-container-匹配屏幕尺寸
.flex-container .content-能够拉伸物品

您应将.item设置为flex: 1;

这是一个有效的版本：https://jsfiddle.net/oj0thmv7/5/

这是一个滚动的工作示例：https://jsfiddle.net/oyLbxsrc/

如果您将100％更改为100vh，则可以使用

.flex-container .content .item {
    height: 100vh;
}

还是我误解了这个问题？

带flex的Flexbox：1个孩子和100个孩子的孙子

如何解决带flex的Flexbox：1个孩子和100个孩子的孙子

解决方法

相关推荐