我正在尝试创建一个布局，顶部有标题，下面有侧边栏和主要内容。
我想让侧边栏和内容视图占据标题留下的垂直空间。问题是标题可以动态调整大小，所以我无法执行calc()。我的解决方案是使用弹性盒方案。
我将视口水平分成两部分。一个是标题，一个是侧边栏和主要内容的包装。
侧边栏向左浮动并给出宽度的百分比，内容向右浮动并给出其余部分。
问题是我试图使侧边栏始终为包装器的 100% 高度。
I tried height: 100% and min-height: 100%但这些都不起作用。
我不希望绝对定位它，因为如果包装器溢出主要内容，侧边栏将不会相应扩展。
这是我的笔：http://codepen.io/markt5000/pen/JXNXpW http://codepen.io/markt5000/pen/JXNXpW
正如您所看到的，橙色是标题，红色空间是带有侧边栏和内容的包装。
这是布局
<div class="header">
</div>
<div class="row">
<div id="sidebar">
</div>
<div id="main-content">
</div>
</div>
没有必要：
-
height, min-height or calc在你的弹性项目上
- 绝对定位
- 浮动（事实上，它们没有用，因为在 Flex 格式化上下文中浮动被忽略 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/#flex-containers)
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;
}
<div class="outer-flex-container">
<div class="header">HEADER</div><!-- main flex item #1 -->
<div class="nested-flex-container"><!-- main flex item #2 -->
<div class="sidebar">SIDEBAR</div><!-- inner flex item #1 -->
<div class="content">MAIN CONTENT</div><!-- inner flex item #2 -->
</div><!-- close inner flex container -->
</div><!-- close outer flex container -->
修订版代码笔 http://codepen.io/anon/pen/LNyZYQ?editors=1100
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
