使 div 在固定侧边栏 (css) 内可滚动

【问题标题】：make div scrollable inside fixed sidebar (css)使 div 在固定侧边栏 (css) 内可滚动
【发布时间】：2017-09-11 12:54:47
【问题描述】：

有人可以帮助我吗？ 侧边栏中的 div（最后一个）应该是可滚动的。 我想将侧边栏用于电话号码搜索和显示生日等功能。

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

到目前为止，这就是我的代码：

JSFiddle

* {
  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;
}
<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>

【问题讨论】：

  • 在.sidebar上加overflow:auto有你想要的效果吗？
  • @Jonathan 不幸的是没有。我只希望最后一个 div 可以滚动，而不是整个侧边栏。
  • 如果屏幕太小以至于看不到最后 2 个 div 怎么办？
  • @Jonathan 从来没有想过这一点。但该侧边栏应该只在桌面而不是移动设备上可见。

标签： html css scrollable


【解决方案1】：

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

并应用了以下 css

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

希望这是你正在尝试的。

【讨论】：

  • 不完全。我希望 div 拉伸可用高度。如果高度设置为 100 像素，则只会显示一个通知。
  • 您不必指定高度，只需说自动高度。我猜你希望 top 保持在顶部，bottom 保持在底部，并且它说的内容功能会去哪里？
  • top 和 bottom 仅用于查看 div 是否可滚动。项目内的所有内容都应该是可滚动的。
【解决方案2】：

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

【讨论】：

  • 请查看我的问题下的 cmets。
【解决方案3】：

如果您希望最后一个孩子与其他孩子不同...滚动 y 说。有一个伪类选择器。

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

【讨论】：

  • 你能给我看看我的小提琴吗？这似乎是一个很好的答案，但我无法让它发挥作用。
【解决方案4】：

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

* {
  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);
}
<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>

工作Demo

【讨论】：

  • 工作正常。我猜 215px 是其他项目的总和？如果有更多或更少怎么办？有没有办法计算这个？
  • 是的 215px 是其他项目的总和。如果有或多或少，您需要根据该计算高度。您可以为此使用 jquery。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-09-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-31
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode