尝试让我的CSS容器占据整个页面宽度

Question

我正在尝试在我的网站上使用此https://codepen.io/LA_water/pen/rNaYZBb。

问题是这个背景停在我的标题边缘（左侧和右侧）。

我正在使用 wordpress，所以我不确定是否可以修改我的标题，但如果可能的话我不想这样做。

谢谢！

我尝试在容器类上使用

width:100%;

，但它仍然停在标题的边缘。

Answer 1

你必须使用该属性

width: 100vw

（记得将其包含在 HTML 头部中）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是因为如果您将 100% 设置为宽度，则它会考虑您所在容器的 100%。如果您使用视口宽度，您会考虑当前窗口宽度的 100%

看到这个：https://blog.webdevsimplified.com/2022-08/css-viewport-units/#:~:text=The%20viewport%20is%20just%20a,10vw%20would%20only%20be%2030px .

还有这个：https://www.w3schools.com/css/css_rwd_viewport.asp

另外，检查其他属性以避免冲突。