固定标题与垂直滚动条

Question

我怎样才能为每个人fixed header提供一个垂直方向.scroll-barcolumn

<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上述两个显示属性中的一个更改为属性,然后添加overflow属性.在这种情况下,您还需要设置特定的宽度/高度.

为了将标题固定到顶部,只需应用于position: absolute;标题元素并将列a设置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;
}

示例CodePen