我有一个基本的两列flexbox布局(侧面菜单, Headers ,主要内容) .
我希望我的侧边菜单有一个固定的宽度,但高度增加到整个页面的100% . 对于我的主要内容,有一个固定的高度 Headers 和一个动态高度内容窗格,我希望该窗格的背景也填充100%的可用高度 .
-
如果屏幕的高度足够高,可以包含所有内容,那么一切都很有效
-
如果屏幕's height cannot contain everything (eg: requires scrolling) then 1) the menu'的背景仅下降到原始视口的底部,2)主要内容的背景较低[但仍然不是全高],因为 Headers 会将其向下推一些 .
当主要内容超出可用高度并需要滚动时,背景不会一直延伸到页面
查看黑色,灰色和控制台窗口之间的交叉点...左侧黑色bg是具有静态内容的菜单,右侧灰色bg是具有增长内容的主要内容,第二个两个图像中的底部白色bg是wtf?
-
加载数据之前,根本没有向下滚动
-
加载数据之前,向下滚动到页面末尾
-
加载数据后,向下滚动到页面末尾
我不知道高度100%附加到html,身体实际上是在做什么,因为删除它们不会改变行为,仍然与下面的截图相同 .
见小提琴here
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.flex-row.flex-fill {
height: 100%;
}
.flex-col {
display: flex;
flex-direction: column;
flex-flow: column;
flex-wrap: nowrap;
justify-content: flex-start;
}
.flex-col.flex-fill {
width: 100%;
}
.flex-right {
margin-left: auto;
}
.menu {
width: 200px;
background-color: blue;
color: $white;
padding: 15px;
height: 100%;
flex-grow: 1;
}
.header {
background-color: red;
padding: 15px;
font-family: italic;
font-size: 1.5em;
}
.main-content {
background-color: green;
height: 100%;
flex-grow: 1;
padding-bottom: 30px;
}
<div class="flex-row flex-fill">
<div class="flex-col">
<div class="menu">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
</div>
<div class="flex-col flex-fill">
<div class="header">header</div>
<div class="main-content">main content</div>
</div>
</div>
1 回答
导致问题的原因有两个:
首先,flex容器上的
height: 100%
无法正常工作,因为有no height specified on the parent element . 该问题已通过html, body { height: 100%; }
解决 .其次,flex容器上的相同
height: 100%
将背景的高度限制为固定的100% . 通过切换到最小高度,背景可以随内容一起扩展 .revised fiddle