我试图让我的页面的第一部分成为用户窗口的 100%,同时根据屏幕的高度调整 3 个垂直元素的大小。
为了实现这一点,我使用了 flexbox,特别是这些样式:
CSS
.vertical-content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.theitems {
flex-grow: 1;
}
这确实有效,但出于某些奇怪的原因,它只会在 Firefox 中正确调整元素的大小。 Safari 会拉伸(stretch)图像,而 Chrome 根本不会调整大小。我认为我给出的 flex 规范 (flex-grow: 1
) 会调整元素的大小,以便它们都垂直放置在容器中。
Firefox(正确)
Chrome(不正确)
Safari(不正确)
有人知道这里发生了什么吗?
最佳答案
看起来您正在混合使用不能很好地协同工作的两个规则。
你已经给了容器 justify-content: space-between
。
但是你也给了每个 flex 元素 flex-grow: 1
。
如果每个元素都设置为占用所有可用空间,justify-content: space-between
什么都不做(没有空间可以分配)。
二选一。
关于html - 根据容器高度调整元素大小纯 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39498537/