问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flexbox 容器不会拉伸 100% 高度

社区维基
1
新手上路，请多包涵

我有以下 html 和 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssflexboxheight
阅读 367
1 个回答
得票最新
社区维基
1

您需要将 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>

原文由 Mohit Mutha 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题