gpt4 book ai didi

html - 在嵌套的 div 中使用 flexbox 获取可用高度

转载 作者:太空宇宙 更新时间:2023-11-03 21:08:22 24 4
gpt4 key购买 nike

在附加的代码片段中,如何让 .app__main div 填充可用高度:

我试过:

display: flex;
flex: 1;

此内容也需要可滚动。

html, body {
height:100%;
min-height:100%;
overflow: hidden;
}

#root, .app__header, .app__main {
border: 1px solid red;
}

body{
display: flex;
flex-direction: column;
}

#root {
flex: 1;
}

.app__main {
display: flex;
flex: 1;
}
<html>
<body>
<div id="root">
<div class="app__header">Header</div>
<div class="app__main">Main</div>
</div>
</body>
</html>

最佳答案

您需要通过将其容器 (#root) 设为 flexbox,使 .app__main 成为 flex 子项。

html,
body {
height: 100%;
min-height: 100%;
overflow: hidden;
}

#root,
.app__header,
.app__main {
border: 1px solid red;
}

body {
display: flex;
flex-direction: column;
}

#root {
flex: 1;
display: flex;
flex-direction: column;
}

.app__main {
flex: 1;
}
<html>

<body>
<div id="root">
<div class="app__header">Header</div>
<div class="app__main">Main</div>
</div>
</body>

</html>

关于html - 在嵌套的 div 中使用 flexbox 获取可用高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49963300/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com