我有一个基本的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是最好的选择吗?
https://stackoverflow.com/questions/50649191
复制相似问题