Question

我有像这样的HTML

<div class="box-wrap">
    <div class="box">
        <h3>new tab h3</h3>
    </div>
    <div class="box">
        <h3>new tab h3</h3>
    </div>
    <div class="box">
        <h3>new tab h3</h3>
        <h3>new tab h3</h3>
    </div>
</div>

和css：

.box-1 {
    height: 100px;
    background: green;
    height: 100%;
}
.box-wrap {
    height: 100%;
    background: blue;
    display: flex;
    justify-content: space-between;
}
.box {
    background: yellow;
}

真的发生了奇怪的事情当我将.box类的高度设置为高度：100％时，它会拉伸到屏幕高度（我的电脑上的HTML）。但是在codepen中，它不是，如果另一个盒子更高，盒子只会拉伸高度等于另一个盒子的高度。

我真的希望我的HTML文件中的css在codepen中具有相同的行为任何人都可以知道问题或导致此问题的原因吗？谢谢这是codepen链接：https://codepen.io/kqt/pen/oqKXxR

Answer 1

你有几个容器元素在这个代码堆中叠加在一起，所以我不确定你究竟遇到了什么问题，但似乎你在谈论第二个问题。如果是这样，Temani Afif是对的，你需要在身体和身体上设置100％的身高。 html元素，但是如果你试图让那个父元素成为屏幕的高度，那么每个父元素都会降低到你的Flex容器的级别。你还有一个额外的div包裹整个东西，没有css类，所以如果真的需要在那里，那么它也需要100％的高度，但你可以选择它与身体＆gt ; div喜欢这样：

html,
body, 
body > div,
.container,
.box-container {
  height: 100%;
}

演示：https://codepen.io/anon/pen/XqbGpV

css flex box并将height设置为100％的children元素，但children元素的拉伸等于屏幕高度？

1 个答案: