Question

如何为每个fixed header提供一个scroll-bar垂直column。

<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;应用于标题元素，并为列添加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

固定标题与垂直滚动条

1 个答案: