如果页面上的其他内容导致滚动，则高度为 100vh 的侧边栏不会填满页面

Question

我正在 React 中构建一个侧边栏，并且我正在尝试设置高度以填充整个页面，即使页面上的其他内容超出了初始窗口大小。

现在它只到达初始页面高度的底部，如果页面上的内容——在侧边栏旁边，而不是在它里面——溢出，用户可以滚动并且内容是可见的，但是侧边栏停在初始页面高度的末尾。

Here is a screenshot 我所描述的

我尝试了以下方法：

min-height: 100vh;
height: 100vh;
---
min-height: 100vh;
height: 1px;
---
min-height: 100vh;
height: 100vh;
max-height: 500vh;
---
html, body {margin: 0; padding: 0;}

[更新] 我尝试过使用我能想到和在网上看到的所有不同尺寸。 % 从html一路到侧边栏的容器，vh一路向下，min-height一路向下，min-height & max-height一路向下，不同浏览器看是不是chrome/firefox。我认为这个问题是一个概念性问题，涉及 CSS 中的大小调整方式，但我不知道要问什么问题才能找到答案。

无济于事。我四处寻找类似的问题，但没有找到任何适合我的解决方案。

我不是前端人员，所以我不完全确定为什么这不起作用。

这是侧边栏及其祖先的样式表：

html {
  font-size: 10px;
  overflow-x: hidden;
  margin:0;
  padding: 0;
  height: -webkit-fill-available;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: whitesmoke;
}

#root {
  width: 100vw;
  height: 100vh;
}

.container {
  position: relative;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  color: rgb(58,58,58);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.Settings {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
}

.Settings-Sidebar {
  display: flex;
  overflow: visible;
  flex-direction: column;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  width: 34%;
  background: rgb(58,58,58);
  color: white;
}

以及相关的反应组件（wip）：

const Settings = () => {
  const user = useSelector(state => state.authReducer.user);
  const loading = useSelector(state => state.loadingReducer.isLoading);
  const location = useLocation();
  const hash = location.hash;
  const dispatch = useDispatch();
  const [active, setActive] = useState(null);

  useEffect(() => {
    if (!active) {
      const activeElement = document.querySelector('.Settings-Sidebar-Option.active');
      setActive(activeElement);
    }
    dispatch(stopLoading());
    if (hash.includes('#confirm-email')) {
      const target = document.querySelector('#settings-confirm-option');
      target.click();
    }
  }, [active, dispatch, hash]);

  if (user.username === undefined) return <Redirect to="/" />

  if (loading) {
    return <Loading />
  }

  const setActiveSetting = (evt) => {
    const target = evt.target
    // Prevent changing active element to random whitespace
    if (target.classList.contains('Settings-Sidebar-Option')) {
      // remove the active class from all setting options
      for (let sibling of target.parentElement.children) {
        sibling.classList.remove('active');
      }
      target.classList.add('active');
      setActive(target);
    }
  }

  return (
    <div className="Settings">
      <div className="Settings-Sidebar">
        <h1 className="Settings-Sidebar-Header">Settings</h1>
        <div className="Settings-Sidebar-Content" onClick={setActiveSetting}>
          <h2 className="Settings-Sidebar-Option active" id="settings-general-option">General</h2>
          {!user.confirmed ? (
            <h2 className="Settings-Sidebar-Option" id="settings-confirm-option">Verify Email</h2>
          ) : null}
          <h2 className="Settings-Sidebar-Option" id="settings-contact-option">Contact</h2>
          <h2 className="Settings-Sidebar-Option" id="settings-about-option">About</h2>
          <h2 className="Settings-Sidebar-Option" id="settings-delete-option">Delete Account</h2>
        </div>
      </div>
      <div className="Settings-Content">
        {active ? <SettingsContent current={active.innerText} /> : null}
      </div>
    </div>
  )
}

Answer 1

在没有任何演示的情况下很难说出如何解决问题，但我认为您需要将CSS 的position 属性用于侧边栏容器以获得所需的结果。 这就是我现在可以从你分享的图像中看出的。 如果您需要更多帮助，请告诉我。