保持100％的浏览量高度

Question

我正在尝试将页面保持在一个固定的视图（高度和宽度为100％），并使用布局<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;
}