css 如何使用Flexbox将子元素的高度设置为父元素的100%？

waxmsbnn 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(415)

我目前遇到了一个问题，每当我试图让一个子容器占据容器剩余高度的100%时，子容器的高度就会扩展到父容器的边界之外。

- 超文本标记语言**

.container {
  height: 340px;
  /* background-image: url(../images/topo-bg-3-black.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; */
  background-color: #DDDEDA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-wrap {
height: 200px;
display: flex;
align-items: center;
justify-content: space-evenly;
}

.content {
height: 100%;
width: 171px;
background-color: aqua;
}

.content-pic {
 width: 100%;
height: 115px;
background-color: green;
margin-top: 5px;
}

.content-text {
background-color: red;
height: 100%;
width: 100%;
}

<div class="container">
  <div class="container-wrap">
    <div class="content">
    5 HOURS AGO
        <div class="content-pic"></div>
        <div class="content-text"></div>
    </div>
  </div>
</div>

包含我的代码的JSFiddle是here。
我尝试使用align-items：stretch;以及其他线程建议的position属性都没有用。宽度占容器的100%还不错，但高度不行，我有点不知道该怎么做。

css

来源：https://stackoverflow.com/questions/75242483/how-to-set-a-childs-height-to-100-of-a-parent-element-using-flexbox

1条答案

按热度按时间

7d7tgy0s1#

我为你收集了两种解决方案。
第一个（正如我在评论区所说的）是使用 * overflow：hidden * 隐藏元素的溢出部分：

.content {
height: 100%;
width: 171px;
background-color: aqua;
overflow: hidden;
}

第二个是彻底解决这个问题，我确定你使用的它的 * height * 的 * content-pic * 是 * 115px * 而不是percent，所以这个东西会溢出，所以这里是解决方案：

.content-pic {
   width: 100%;
  height: 115px;
  background-color: green;
  margin-top: 5px;
  }
  
  .content-text {
  background-color: red;
  height: calc(100ph - 115px);
  width: 100%;

  }

它会在开始溢出的原因是你放了两个元素，一个有115px大小，另一个有100%大小，所以第二个的顶部位置是115px，而宽度仍然是100%。
在这种情况下，我将 * width：100%* 改为 * calc（100ph-115px）。 100ph * 与 * 100%* 相似，* 115px * 是 * content-pic * 的高度。
此外，请使用 * span * 而不是什么都不使用，因为如果不这样做，它在某些情况下将不起作用。
这是完整的代码（对于第二个解决方案）：
一个二个一个一个

赞(0）回复(0）举报 2023-01-27

我来回答

css 如何使用Flexbox将子元素的高度设置为父元素的100%？

1条答案

相关问题

热门标签

最新问答