如何将两列的高度设置为较小列的高度
如何将两列的高度设置为较小列的高度
提问于 2014-12-10 21:12:55
我有两个专栏，如this pen所示。我正在寻找一个只支持CSS的解决方案(显然，允许使用flexbox)来将左列的高度设置为右列的高度(较小的列)，这样它就有了自己的滚动条。有没有办法做到这一点？下面是pen…中的代码
HTML：
<div class="container">
<ul class="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<div class="content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ipsa nihil quisquam obcaecati labore exercitationem, suscipit placeat. Aut soluta odit fuga vel sed est. Quod quisquam impedit libero. Laboriosam, magni!</p>
</div>
</div>(S)CSS：
.container {
display: flex;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.list {
flex: 1;
overflow-y: auto;
}
.content {
flex: 4;
}回答 2
Stack Overflow用户
发布于 2015-04-14 22:23:57
这似乎工作得很好：
- 将
.list包装在包装器中(将.list样式设置为.list-outer，而不是 - 将
heightof.list设置为0
Stack Overflow用户
发布于 2014-12-12 12:26:42
CSS：
.container {
display: flex;
max-width: 800px;
margin-left: auto;
margin-right: auto;
overflow-y: auto;
max-height: 150px;
}
.list {
flex: 1;
}
.content {
flex: 4;
}当你想让它动态化时，可以使用Javascript
示例JS代码：
$(document).ready(
function()
{
var lenContent = $(".content").height;
$(".container").css("max-height", lenContent);
}
)谢谢,
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27401932
复制相关文章
相似问题
腾讯云开发者
