保持 100% 的网页浏览高度

Question

我正在尝试将我的页面保持在单个固定视图（100% 高度和宽度），并使用在 Layout <content> 中找到的 react-custom-scrollbar 包装任何长内容。

理想情况下，我希望在 <content></content> 中只有一个滚动条来显示我的内容。问题可能是因为我没有定义任何布局容器大小来支持 100vh 视图（响应式）

资源： Tabs Custom scrollbar

假设它是通过 css 的，我如何实现单次浏览？

我对 react-custom-scrollbar 还是很陌生，如何在加载/单击 TabPane 时将滚动位置重置到顶部？

页面浏览量 https://dw0to.csb.app/

Answer 1

将最外层 div 的 overflow 属性设置为 hidden。然后为您的<content> 组件定义一个包装器，并将其overflow 属性设置为auto。

我对antd不熟悉，但这是用CSS完成的。

在本例中，App 封装了所有元素，因此我将其overflow 属性设置为hidden。

JSX：

function App() {
  return (
    <div className="App">
      <div className="wrapper">

        //Your components

      </div>
    </div>
  );
}

CSS：

html,
body {
  overflow: hidden;
  height: 100%;
}

.App {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.wrapper{
  height: 100%;
  width: 100%;
  overflow: auto;
}