时间戳

首页 > 解决方案 > 最大高度弯曲

html - 最大高度弯曲

问题描述

如何使用 flex 将左列（块）的高度设置为 100%？我有这样的dom：

<LeftPanel>
  <Logo />
  <Profile />
  <Chat />
  <SocialButtons />
</LeftPanel>

LeftPanel拥有 100% 的高度。Chat应该通过可用空间增长或缩小，但事实并非如此。我应该如何使用 css(scss) flex 呢？

标签： htmlcsssassflexbox

解决方案

我不知道我是否得到了你想要做的，但如果你想<LeftPanel>成为 100% 的屏幕并<Chat>垂直扩展，你应该使用以下属性设置它的 CSS：

.LeftPanel {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

<Logo>,<Profile>并且<SocialButtons>应该有一个定义的height. 像下面的例子：

.Logo {
    height: 60px;
    width: 100%;
}

.Profile {
    height: 160px;
    width: 100%;
}

.SocialButtons {
    height: 50px;
    width: 100%;
}`

然后，这里有两个可能的技巧：

.Chat {
    flex-grow: 1;
}`

您可以将flex-grow弹性项目的扩展系数设置为高于其他项目，请在此处阅读文档。

.Chat {
    height: 100vh;
}`

如果.Chat的父级不使用 包装其内容flex-wrap，则.Chat将占用父级空间的剩余空间。

推荐阅读