CSS：是否有可能在保持布局的同时突破容器

Question

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

我试图将位置更改为绝对位置，但这使我的页脚崩溃了。

这是容器的宽度：

    width: calc(100% - 40px);

Answer 1

CSS支持负边距，如果我正确阅读了您的问题，则您有一个带边距的父容器和一个您想到达父容器之外的子容器。这样的事情应该起作用：

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

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

Answer 2

在研究了OutOfTheSandbox的Turbo主题并检查了其demo的代码之后，我发现添加类https://maps.googleapis.com/maps/api/geocode/json?key=<key>&address=<address>应该可以：

container full-width--true

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