使div可以在固定侧边栏（css）内滚动

Question

可以sombody帮帮我吗？ 侧边栏内的div（最后一个）应该是可滚动的。 我想使用侧边栏来完成一些功能，如电话搜索和显示生日。

在最后一个div中，我想展示很多通知。 每个通知的最小高度约为100px。 如果有太多我想让div可滚动。

这是我的代码：

JSFiddle

prod_db_end_date_format = %%Y-%%m-%%d

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background-color: red;
  border: 4px solid blue;
}

.sidebar {
  position: fixed;
  top: 36px;
  bottom: 0;
  right: 0px;
  width: 200px;
  background-color: blue;
  border: 4px solid yellow;
}

.sidebar_item {
  margin-bottom: 5px;
}

.item_header {
  font-weight: bold;
  border: 1px solid #000;
  background-color: green;
}

.content {
  margin-top: 36px;
  margin-right: 200px;
  background-color: yellow;
  border: 4px solid purple;
}

Answer 1

您需要在侧边栏类中添加overflow:auto;样式。

Answer 2

可滚动div更改为另一个名称我将其更改为     sidebar_item2

并应用以下css

.sidebar_item2 {
    overflow-x:auto;
    height:100px;
}

希望你正在尝试。

Answer 3

如果你想让最后一个孩子与其他孩子不同......滚动y说。有一个Pseudo-class选择器。

 .sidebar:last-child { overflow-y: scroll; }

Answer 4

使用.sidebar_item:last-child伪类选择器并使用calc()计算高度

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background-color: red;
  border: 4px solid blue;
}

.sidebar {
  position: fixed;
  top: 36px;
  bottom: 0;
  right: 0px;
  width: 200px;
  background-color: blue;
  border: 4px solid yellow;
}

.sidebar_item {
  margin-bottom: 5px;
}

.item_header {
  font-weight: bold;
  border: 1px solid #000;
  background-color: green;
}

.content {
  margin-top: 36px;
  margin-right: 200px;
  background-color: yellow;
  border: 4px solid purple;
}
.sidebar_item:last-child {
  overflow-y:auto;
  height: calc( 100% - 215px);
}

＆＃13;

<div class="navbar">Navbar</div>
<div class="sidebar">
  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>


  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <div class="sidebar_item">
    <div class="item_header">Header</div>
    Content
  </div>

  <!-- Scrollable div -->
  <div class="sidebar_item">
    <div class="item_header">Header</div>
    <p>TOP</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>BOTTOM</p>
  </div>


</div>
<div class="content">
  <p>TOP</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>bla</p>
  <p>BOTTOM</p>
</div>

＆＃13;

＆＃13;

＆＃13;

工作Demo