没有必要：
Flex属性具有使布局工作所需的所有功能.关键是使用flex：1使项目扩展容器的完整可用长度.
因此,标题的高度可以是动态的,侧边栏和主要内容可以用来消耗任何高度.没有滚动条.
这是您的代码,其中包含一些修订：
html { height: 100%; }
body {
height: 100%;
margin: 0;
padding: 0;
}
.outer-flex-container {
height: 100%;
display: flex;
flex-direction: column; /* main flex container stacks items vertically */
}
.header {
height: 80px; /* demo purposes; from your original code */
background-color: orange;
}
.nested-flex-container {
display: flex; /* inner flex container stacks items horizontally */
flex: 1; /* KEY RULE: tells this second flex item of main container
to consume all available height */
align-items: stretch; /* KEY RULE: default setting. No need to include. Tells
children to stretch the full length of the container
along the cross-axis (vertically,in this case). */
}
.sidebar {
flex-basis: 20%; /* set width to 20% */
background-color: aqua;
}
.content {
flex: 1; /* set width to whatever space remains */
background: magenta;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
