Question

我有一个div，其最大宽度设置为1200px。我想设置背景，但是，我希望背景一直贯穿整个屏幕，并忽略div的宽度。使用CSS可以做到吗？

.container {
    max-width: 1200px;
    position: relative;
    background-color: black;

我想保留元素的内容以侦听max-width属性。这只是我要深入了解的背景。

编辑

对于那些认为我没有尝试以不同方式解决问题的人。我做到了，我开始努力了。但是，我的问题是：

是否可以将div的background-color设置为忽略div的大小并遍历整个屏幕？（位于div之外），没有父容器和内部容器，而是使用纯CSS ...

Answer 1

希望获得帮助。

您可以使用这种杀手way。

ComboBox

.container {
    max-width: 1200px;
    margin: 0 auto;
}
.container:before {
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 100vw;
    background: #e5e5e5;
    z-index: -1;
}
body {
    position: relative;
    margin: 0;
    padding: 0;
}

Answer 2

尝试使用已修复的伪元素，并使用继承来获取容器的背景：

.container {
  max-width: 400px;
  min-height: 200px;
  margin: auto;
  position: relative;
  background: red;
  border: 3px solid #000;
}

.container:before {
  content: "";
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
}

<div class="container"></div>

Answer 3

这违背了HTML文档的结构。

虽然您可以从技术上“破解”实现这一目标的方式，但是您应该简单地使用适当的结构代替

所有子节点都包含在其父元素内。如果您不希望将元素绑定到其父元素，只需将其放置在其外部即可。

#inside { 
  width: 80%;
}

.fullwidth {
  width: 100%; /* redundant, but for illustration purposes */
}

 body > div {
  border: 1px solid black;
  margin: 10px auto;
}

<body>
  <div id="inside">
    <div class="fullwidth">
      I'll always be 100% of my parent's width
    </div>
  </div>
  
  <div class="fullwidth">
    My parent is body (which is 100%), so I'll be 100% of body as well!
  </div>
</body>

您实质上正在创建一个不存在的问题。您应该使用正确的HTML文档结构

，而不是尝试找到破坏文档流程的方法。

注意：显然，您可以创建一个.wrapper，该服务器将为您的内容提供100％宽度的背景，即80％左右。毕竟这是惯例。

设置div的背景并设置宽度以遍及整个屏幕

3 个答案: