Flexbox容器无法拉伸到100%的高度。

Question

Flexbox容器无法拉伸到100%的高度。

17

I have the following html and css:
HTML:

<body style="height:100%;">
  <div class="fb-container">
    <div class"somedatadiv">
      Some data
    </div>
    <div class="anotherdiv">
      data
    </div>
  </div>
</body>

CSS：

.fb-container { 
  display: flex;
  flex-wrap: no-wrap;
  align-items: stretch;
  // min-height: 100%;
}
.somedatadiv {
  width: 75%;
  max-width: 345px;
  backround: grey;
  padding: 30px;
}

由于某些原因，弹性容器div未能将高度拉伸到页面的100%。

（我正在使用Chrome浏览器进行此“演示/应用程序/网站”）

- Babulaas

从下面的OP回答中： "MCV模板中有些代码错位了，这导致样式/布局出现问题。这篇文章对其他用户没有意义，因此它将被删除。更新：无法删除此文章："。 - Michael Benjamin

3个回答

4

加入这个代码就可以使它工作。演示：https://jsfiddle.net/jacobgoh101/svtewj9j/

html,
body {
  height: 100%;
}

body {
  display: flex;
}

更新: 如果您希望fb-container保持全宽

请添加flex: 1 1 100%;

.fb-container {
  flex: 1 1 100%;
}

更新: 完整解决方案https://jsfiddle.net/jacobgoh101/svtewj9j/2/

html,
body {
  height: 100%;
}

body {
  display: flex;
}

.fb-container {
  display: flex;
  flex-wrap: no-wrap;
  align-items: stretch;
  flex: 1 1 100%;
}

.somedatadiv {
  flex: 1 1 75%;
  max-width: 345px;
  backround: grey;
  padding: 30px;
  box-sizing: border-box;
}

- Jacob Goh

谢谢，它对高度起作用，但我的宽度会被裁剪。数据div不再是345像素。 - Babulaas

JSfiddle无法工作。答案中没有HTML。因此，无法测试答案。JSFiddle不能替代答案内部的代码。 - parsecer

-2

在MCV模板中，有一些代码被错误地放置了，导致样式/布局出现问题。这篇帖子对其他用户来说并不相关，因此将被删除。

更新：无法删除此帖子：

- Babulaas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohit Mutha · Accepted Answer

您需要在父标签上添加display:flex，然后在子标签上添加flex:1，使子标签能够扩展到父标签的100%。

.fb-container { 
  background-color:green;
  flex: 1;
  
}
.somedatadiv {
  width: 75%;
  max-width: 345px;
  background-color: grey;
  padding: 30px;
}

<body style="height:100vh;display:flex;">
  <div class="fb-container">
    <div class="somedatadiv">
      Some data
    </div>
    <div class="anotherdiv">
      data
    </div>
  </div>
</body>