添加到主面板 div 的宽度导致页面宽度延伸到窗口答案

【问题标题】：Width added to main-panel div Causing Pages Width to extend over the Window添加到主面板 div 的宽度导致页面宽度延伸到窗口
【发布时间】：2022-01-16 09:55:21
【问题描述】：

我为 Reactbootstrap 下载了这个主题，并使它与 NextJS 一起工作。困扰我的问题是我在 Layout.js 中的<div className="main-panel"> 稍微超出了窗口。就像垂直滚动条添加到水平边距一样。解决方案是用div 覆盖滚动条吗？我只想要它，以便<div className="main-panel"> 适合窗口并且不需要水平滚动。我不知道如何解释，但我有一个例子给你看。 https://codesandbox.io/s/stackoverflow-page-extends-off-window-d3gdc?file=/pages/index.js

这是 Layout.js 渲染：

return (
        <div className="wrapper">
            <Sidebar routes={routes} image={sidebarImage} background={sidebarBackground} />
            <div className="main-panel">
                <AdminNavbar />
                <div className="content">{props.children}</div>
                <AdminFooter />
                <div className="close-layer" onClick={() => document.documentElement.classList.toggle("nav-open")} />
            </div>
        </div>
    );

【问题讨论】：

标签： html css reactjs next.js react-bootstrap

【解决方案1】：

我发现问题是<AdminFooter /> 的CSS 宽度大于<div className="main-panel"> 宽度。由于main-panel 宽度设置为 100%，它将导致页脚溢出。我的短期解决方案是一般只删除页脚。

<div className="wrapper">
  <Sidebar routes={routes} image={sidebarImage} background={sidebarBackground} />
  <div className="main-panel">
    <AdminNavbar />
    <div className="content">{props.children}</div>
    <div className="close-layer" onClick={()=> document.documentElement.classList.toggle("nav-open")} />
    </div>
  </div>

【讨论】：