Question

我有两列布局。左列是重复消息的列表，右列是几个不同的菜单。我希望两列始终与右列的高度相同，左列中的消息应该溢出以滚动。左栏中还有一个不应滚动的标题。

问题在于，如果没有明确设置滚动div的高度，它将展开以包含所有跨度并且永不溢出。如何通过溢出滚动使左列与右侧相同？有关我想要的示例，请取消注释height:120px中的.scroll行。这是JSFiddle

这是基本结构的模拟

<div class='table'>
<div id='c1' class='column'>
    <h4>Column 1</h4>
    <div class='scroll'>
        <span></span><span></span><span></span>
        <span></span><span></span><span></span>
        <span></span><span></span><span></span>
    </div>
</div>
<div id='c2' class='column'>
    <h4>Column 2<h4>
</div>
</div>

和css

div.table {
    display:table;
    width:500px;
}

div.table div.column {
    display:table-cell;
}

#c1 {background-color:blue;}
#c2 {background-color:red; height:150px;}

.scroll {
    background-color:#ccc;
    overflow-y:auto;
    //height:120px;
}

.scroll span {
    height:28px;
    background-color: #999;
    display:block;
    margin-top:2px;
}

我试图在没有任何 JS 的情况下这样做 - 但我可能不得不使用它。我使用display:flex尝试了一个解决方案但是无法像这个那样接近它。

编辑：我实际上并不知道右列的高度。它会根据动态生成的内容进行更改 - 如果有人扩展菜单，则会增长。我希望左列通过溢出滚动保持固定到右列高度。我已经更新了jsFiddle：http://jsfiddle.net/s38ax4nq/2/

Answer 1

＆＃13;

div.table {
  display: table;
  width: 500px;
}
div.table div.column {
  display: table-cell;
}
#c1 {
  background-color: blue;
}
#c2 {
  background-color: red;
  height: 150px;
}
.scroll {
  background-color: #ccc;
  overflow-y: scroll;
  height: 150px;
}
.scroll span {
  height: 28px;
  background-color: #999;
  display: block;
  margin-top: 2px;
}

＆＃13;

<div class='table'>
  <div id='c1' class='column'>
    <h4>Column 1</h4>
    <div class='scroll'>
      <span></span><span></span><span></span>
      <span></span><span></span><span></span>
      <span></span><span></span><span></span>
    </div>
  </div>
  <div id='c2' class='column'>
    <h4>Column 2</h4>
  </div>
</div>

＆＃13;

您可以更改css之类的内容。

.scroll {
    background-color:#ccc;
    overflow-y:scroll;
    height:150px;
}

两列灵活的滚动溢出

1 个答案: