时间戳

首页 > 解决方案 > 侧边栏滚动受后面内容影响

html - 侧边栏滚动受后面内容影响

问题描述

我创建了一个侧边栏，其页面内容如下（示例）：

<div id="sidebar">
  <nav>
    <ul>
      <li>
        <a href="#">Page 1</a>
      </li>
      <li>
        <a href="#">Page 2</a>
      </li>
    </ul>
  </nav>
</div>

<div class="content">
  <h1>Main Content</h1>
  <p>Lorem ipsum dolor sit amet ... More content</p>
</div>

和CSS：

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;   
  left: 0;
  right: 0;
  bottom: 0;     
  width: 100%;
  opacity: 0.90; /* Used opacity to show content behind */
}

如果侧边栏内容很大，我需要侧边栏填满整个屏幕并垂直滚动......

但是如果后面的内容很大，我不希望侧边栏滚动......

在示例中，有 Y 滚动，因为即使侧边栏的内容不是，后面的内容也很大。

如何解决这个问题？

标签： htmlcss

解决方案

有些可能是这样的：

body {
  overflow-y: hidden;
}

#sidebar {
  background-color: #e0e0e0;
  border: 1px solid red;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.90;
  height: 100vh;
  overflow-y: auto;
}
<div id="sidebar">
  <nav>
    <ul>
      <li>
        <a href="#">Page 1</a>
      </li>
      <li>
        <a href="#">Page 2</a>
      </li>
    </ul>
  </nav>
</div>

<div class="content">
  <h1>Main Content</h1>
  <p>Lorem ipsum dolor sit amet ... More content</p>
</div>

推荐阅读