CSS：是否可以在保持布局的同时打破容器答案

【问题标题】：CSS: Is it possible to break out of a container while keeping the layoutCSS：是否可以在保持布局的同时打破容器
【发布时间】：2019-02-07 00:32:02
【问题描述】：

我正在编写一个应该在移动设备上全屏显示的页面。它将显示在左右两侧有边距的 shopify 商店中。我想在不接触我的 html 容器的情况下删除这些。这可能吗？

我试图将位置更改为绝对位置，但这会折叠我的页脚。

这是容器的宽度：

    width: calc(100% - 40px);

【问题讨论】：

【解决方案1】：

CSS 支持负边距，如果我正确阅读了您的问题，那么您有一个带边距的父容器和一个您希望在父容器之外访问的子容器。像这样的东西应该可以工作：

.parent {
   margin-left: 1em;
   margin-right: 1em;
}
.child {
   margin-left: -1em;
   margin-right: -1em;
}

然后更改您的负边距以匹配父级边距，您应该能够在不更改父级容器的情况下脱离父级。

【讨论】：

【解决方案2】：

在研究了 OutOfTheSandbox 的 Turbo Theme 并检查了他们的 demo 的代码后，我发现添加类 container full-width--true 应该可以工作：

    <div class="container full-width--true"> 
        // My full-width container 
    </div>

这会将容器宽度设置为 100%，从而占据视口的整个宽度。

【讨论】：