我有一个基本的flexbox布局,如下所示。
body,html {
height:100%;
width:100%;
}
#container {
width:100%;
background:grey;
display:flex;
flex-direction:column;
}
.top {
background:red;
flex:1;
padding:20px;
}
.bottom {
background:yellow;
flex:1;
padding:20px;
}
<div id="container">
<div class="top">
Top Content
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
</div>
</div>
我试图让顶部的div填充剩余的空间,底部的div是动态的,所以高度根据文本的不同而变化。我的结果是这样的..
在这种情况下,使用flexbox是最好的选择吗?
发布于 2018-06-02 02:41:01
容器未设置为100%
高度。它不够高。将容器设置为height: 100%
之后,还必须为每个flex项设置flex-basis
。底部可以是flex: 1 1 auto
,但顶部应该是flex: 0 1 auto
body,html {
height:100%;
width:100%;
margin: 0;
}
#container {
width:100%;
height: 100%;
background:grey;
display:flex;
flex-direction:column;
}
.top {
background:red;
flex:1 1 auto;
padding:20px;
}
.bottom {
background:yellow;
flex:0 1 auto;
padding:20px;
}
<div id="container">
<div class="top">
Top Content
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
</div>
</div>
https://stackoverflow.com/questions/50649191
复制相似问题