Question

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

FramebufferErrorCode status = GL.CheckFramebufferStatus(FramebufferTarget.Framebuffer);

depth = GL.GenRenderbuffer(); GL.BindRenderbuffer(RenderbufferTarget.Renderbuffer, depth); GL.RenderbufferStorage(RenderbufferTarget.Renderbuffer, RenderbufferStorage.DepthComponent24, Width, Height); GL.BindRenderbuffer(RenderbufferTarget.Renderbuffer, 0); GL.FramebufferRenderbuffer(FramebufferTarget.Framebuffer, FramebufferAttachment.DepthAttachment, RenderbufferTarget.Renderbuffer, depth);的高度为100％。 <LeftPanel> <Logo /> <Profile /> <Chat /> <SocialButtons /> </LeftPanel>应该随可用空间增长或收缩，但事实并非如此。我应该如何使用css（scss）flex？

Answer 1

我不知道我是否满足您的要求，但是如果您希望<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，您可以设置弹性商品的膨胀系数，然后阅读here文档。

.Chat {
    height: 100vh;
}`

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

最大高度弯曲

1 个答案: