html - 固定 div 面板中 y 轴的 css 滚动条

Question

我的 html 内容如下所示，我想要一个高度为 100% 的固定侧边栏。在 ma​​inContent 或 Content 中添加内容时应出现滚动条 y。

<div class="mainContainer">
  <h2>Title</h2>
  <div class="Content">
      <div class="panel panel-success">
          <div class="panel-heading">
              My Panel-1
          </div>
          <div class="panel-body">
              blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
          </div>
      </div>
      <div class="panel panel-success">
          <div class="panel-heading">
              My Panel-2
          </div>
          <div class="panel-body">
              blah... ..blah blah blah... ..blah blah blah... ..blah blah blah...
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
              blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah
          </div>
      </div>
  </div>
</div>

我的 CSS 是这样的:

.mainContainer
{
    float:right;
    height: 100%;
    width:350px; 
    padding:3px; 
    background:#f00;
    overflow-y:auto;
    overflow-y:hidden;
}
.Content
{ 
    background:#fff;
}

Answer 1

对您的样式进行以下更改:

删除

overflow-y: hidden

并添加

overflow-y: scroll
position:fixed;

它会起作用，例如检查这个 jsfiddle.net/467fz6rp/1