Question

我的html内容如下所示，我想要一个高度为100％的固定侧边栏。当内容在 mainContent 或内容中添加时，应显示滚动条。

<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

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

删除

溢出-y：隐藏

并添加

溢出-y：滚动
位置是：固定;

它可以用来检查这个jsfiddle.net/467fz6rp/1

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

1 个答案: