如何创建一个完全独立于左侧栏的 div？

Question

我是 qui新人，对我反应如此赤裸。

我目前在左侧有一个导航侧栏，它已修复。我正在尝试创建右侧显示的所有页面。在这些页面上，我使用的是 material-ui 网格。

但我遇到了麻烦，因为右侧页面的容器 div 向左延伸，甚至延伸到侧边栏，因此网格的“屏幕尺寸”中断了。

这是当前的场景：

这就是我想要的：

这是我在 CSS 中右侧 div 的当前代码：

.Background {
    min-height: 100%;
    width: 100%;
    position: absolute;
}

.Container {
    min-height:100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    padding-left: 250px;
    padding-bottom: 3rem;
    background-color: rgb(252, 249, 251);
}

.background div 扩展整个宽度是可以的，因为这只是设置背景颜色。但是，容器背景，我希望它向右移动。目前，我使用的是 250px 的左填充，这是边栏的宽度，但这只会将组件推到左侧。当我尝试使用 Grid 时，它仍然认为整个页面是屏幕的宽度。

Answer 1

.Background {
    min-height: 100%;
    width: 100%;
    position: absolute;
    background: beige;
    overflow:hidden;
}

.Container {
    width:calc(100% - 250px);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 250px;
    padding-bottom: 3rem;
    background-color: rgb(252, 249, 251);
}

<html>

    <body>
        <div class="Background">
            <div class="Container"></div>
        </div>
    </body>

</html>

这是否如您所愿？我添加颜色以突出背景。

如何创建一个完全独立于左侧栏的 div？

How to create a div completely separate from left side bar?

javascript

css

reactjs

material-ui