时间戳

首页 > 解决方案 > 滚动溢出的侧边栏而不是后面的页面

html - 滚动溢出的侧边栏而不是后面的页面

问题描述

我想要实现的是在侧边栏向下滚动时固定背景页面。这两个元素对于页面来说都太大了。通常页面滚动，但当导航栏打开并溢出页面高度时，它应该开始可滚动。看看这里：

https://jsfiddle.net/tpL92b01/2/

灰色 div 应该是可滚动的。

用于演示的侧边栏不会像通常那样显示和隐藏。

body, p, ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

p{
  padding: 30px;
  text-align: center;
  border: 1px solid blue;
}


.main-content {
  background-color: lightblue;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
}

.sidebar ul {
  background-color: lightgrey;
}

.sidebar li {
  padding: 15px;
}
<html>
  <body>
    <div class="main-content">
      <p>Some content</p>
      <p>Some content</p>
      <p>Some content</p>
      <p>Some content</p>
      <p>Some content</p>
    </div>
    <div class="sidebar">
      <ul>
        <li>Menu item1</li>
        <li>Menu item2</li>
        <li>Menu item3</li>
        <li>Menu item4</li>
        <li>Menu item5</li>
        <li>Menu item6</li>
        <li>Menu item7</li>
        <li>Menu item8</li>
        <li>Menu item9</li>
      </ul>
    </div>
  </body>
</html>

标签： htmlcss

解决方案

尝试将 max-height 和 overflow:auto 添加到侧边栏，这样它只会在需要时滚动。

body, p, ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

p{
  padding: 30px;
  text-align: center;
  border: 1px solid blue;
}


.main-content {
  background-color: lightblue;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  max-height: 100%;
  overflow: auto;
}

.sidebar ul {
  background-color: lightgrey;
}

.sidebar li {
  padding: 15px;
}
<html>
  <body>
    <div class="main-content">
      <p>Some content</p>
      <p>Some content</p>
      <p>Some content</p>
      <p>Some content</p>
      <p>Some content</p>
    </div>
    <div class="sidebar">
      <ul>
        <li>Menu item1</li>
        <li>Menu item2</li>
        <li>Menu item3</li>
        <li>Menu item4</li>
        <li>Menu item5</li>
        <li>Menu item6</li>
        <li>Menu item7</li>
        <li>Menu item8</li>
        <li>Menu item9</li>
      </ul>
    </div>
  </body>
</html>

推荐阅读