html - 带有垂直滚动条的固定标题

Question

如何为我的每个列设置一个带有垂直滚动条的固定标题。

<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
    <div class="row">
      <div class="col-sm-4">Title 1</div>
      <div class="col-sm-4">Title 2</div>
      <div class="col-sm-4">Title 3</div>
    </div>
</div>

下面是我的CSS...

html, body, .container {
    height:100%;
    width:100%; /*keep html and body 100% */
    margin:0;
    background:#e5e5e5;
}
.container {
    display:table;
    width: calc(100% - 260px);
    border-spacing:1.5em;
}

.row {
    display:table-row;
}
.col-sm-4 {
    display:table-cell;
    background:white;
}
.header{
  background:#E5E5E5;
  width:100%;
  height:60px;
}

.secondary-aside{
  width:260px;
  background-color:#E1E1E1;
  height:100%;
  right:0px;
  position:fixed;
}

下面是我的codepen http://codepen.io/anon/pen/lqfxt

Answer 1

overflow 属性仅适用于 block 和 inline-block 元素.为了显示滚动条，您需要将 display 属性从 table-cell 更改为上述两个显示属性之一，然后添加一个 溢出 属性。在这种情况下，您还需要设置特定的宽度/高度。

为了将标题固定在顶部，只需将 position: absolute; 应用于标题元素，并为您的列提供一个 margin-top 以等于标题高度:

.col-sm-4 {
    display: inline-block;
    width: 150px;
    height: 600px;
    background:white;
    overflow-y: visible;
    margin-top: 60px;
}

.header{
    background:#E5E5E5;
    width:100%;
    height:60px;
    position: absolute;
}

Example CodePen