全宽 CSS 设置答案

【问题标题】：Full width CSS settings全宽 CSS 设置
【发布时间】：2020-10-23 22:20:28
【问题描述】：

桌面上的全宽 css 出现问题。您可以在下面的屏幕截图链接中看到容器未填充左侧的情况。

我正在使用：宽度：100vw；位置：相对；左：50%；对：50%；左边距：-50vw；右边距：-50vw;

该网站在这里https://livinghealthywithchocolate.com/recipes/ 或者您也可以在主页上看到这一点。

我该如何解决这个问题？

谢谢！

【问题讨论】：

width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; 没用。但是重置身体边缘可能会很有用。一个块容器填充整个可用宽度。 width:100% 不是真的需要，一旦出现滚动条，width:100vw 就会很麻烦......

标签： css

【解决方案1】：

并非所有屏幕尺寸都会出现这种情况。如果您删除了填充规则，那么您的媒体查询会弄乱填充。

@media only screen and (min-width: 1023px)
.site-inner {
    margin: 20px auto 0;
    padding: 27px 37.5px;
}

应该是

 @media only screen and (min-width: 1023px)
    .site-inner {
        margin: 20px auto 0;
    }

【讨论】：

完美，谢谢！我添加了以下内容并解决了问题:) @media only screen and (min-width: 1023px) { .site-inner { padding: 0; } }
太棒了！我刚刚检查了您遇到问题的部分。记得使用浏览器开发工具（chrome 中的 f12）来调试这个问题！

【解决方案2】：

您可以将其添加到您的 CSS 中。

*{margin:0; padding:0;}


Then set the width of the container to 100%.

【讨论】：