Question

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

灰色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>

Answer 1

请尝试在边栏中添加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>

Answer 2

只需更改此CSS

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

滚动到溢出的侧边栏，而不是后面的页面

2 个答案: