css flexbox,可变高度顶部和底部有约束
css flexbox, variable height top and bottom with constraints
我有一个有顶部和底部的容器。我希望顶部是动态高度,但限制为父级高度的 60%。我想底部占据所有剩余的高度,即使是空的。
css flex 适合这个吗?
我一直在尝试变体
.container {
display: flex;
flex-direction: column;
}
.top {
flex: 1 1 50%;
overflow-y:auto;
}
.bottom {
flex: 1 1 50%;
background-color: red;
}
但收效甚微。
https://jsfiddle.net/2gvL2dk8/
编辑,用这个fiddle
https://jsfiddle.net/2gvL2dk8/3/
顶部没有增长到最大 60% 高度,但底部占据了所有剩余高度。
我想我明白了。不在顶部元素上指定 flex 允许它正常增长和收缩,并在底部保持 flex 设置使该元素使用所有高度。会删除问题,但这可能对以后的人有所帮助。
.top {
max-height: 60%;
overflow-y:auto;
}
.bottom {
flex: 1 50%;
background-color: red;
}
我有一个有顶部和底部的容器。我希望顶部是动态高度,但限制为父级高度的 60%。我想底部占据所有剩余的高度,即使是空的。
css flex 适合这个吗?
我一直在尝试变体
.container {
display: flex;
flex-direction: column;
}
.top {
flex: 1 1 50%;
overflow-y:auto;
}
.bottom {
flex: 1 1 50%;
background-color: red;
}
但收效甚微。
https://jsfiddle.net/2gvL2dk8/
编辑,用这个fiddle
https://jsfiddle.net/2gvL2dk8/3/
顶部没有增长到最大 60% 高度,但底部占据了所有剩余高度。
我想我明白了。不在顶部元素上指定 flex 允许它正常增长和收缩,并在底部保持 flex 设置使该元素使用所有高度。会删除问题,但这可能对以后的人有所帮助。
.top {
max-height: 60%;
overflow-y:auto;
}
.bottom {
flex: 1 50%;
background-color: red;
}