Question

我一直在网上搜索一段时间来回答我的问题。我想将div背景颜色扩展到div（以及容器div）之外，以便达到浏览器的宽度。像这样http://vinnusal.is/ 上面这个例子的问题是我正在使用填充/边距修复，它会在右边创建一个恼人的滚动。我没有运气就试过溢出。

我知道这可以通过100％的容器div和更小的嵌套div来完成。但是，如果可能的话，我想用另一种方式，因为这是我在流体站点的第一次射击，其中包括所有并发症。

提前致谢，海尔吉

以下是HTML标记：

<body>
<div class="gridContainer clearfix"> <!-- Container -->

  <div class="gridContainer clearfix header" id="header"> <!--Header begins--> 
<img src="pics/hvitt.png" alt="VFI Logo" name="logo" id="logo">

<!-- Menu Horizontal -->
... irrelevant markup for menu...

  </div>

  <!-- Header ends -->
<div class="gridContainer clearfix submenu" id="submenu"> <!-- Submenu begins -->
<h1><!-- InstanceBeginEditable name="title" -->Articles<!-- InstanceEndEditable --></h1>

CSS：

/* Mobile Layout: 480px and below. */

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 88.626%;
    padding-left: 1.1869%;
    padding-right: 1.1869%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#submenu {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#article {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#leftColumn {
    clear: none;
    float: left;
    margin-left: 2.6785%;
    width: 100%;
    display: block;
}
#rightColumn {
    clear: none;
    float: left;
    margin-left: 2.6785%;
    width: 100%;
    display: block;
}
#header2 {
    clear: none;
    float: left;
    margin-left: 2.6785%;
    width: 100%;
    display: block;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
    width: 91.4836%;
    padding-left: 0.7581%;
    padding-right: 0.7581%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#submenu {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#article {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#leftColumn {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 100%;
    display: block;
}
#rightColumn {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 100%;
    display: block;
}
#header2 {
    clear: none;
    float: left;
    margin-left: 1.6574%;
    width: 100%;
    display: block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 78.9565%;
    max-width: 1232px;
    padding-left: 0.5217%;
    padding-right: 0.5217%;
    margin: auto;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#submenu {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#article {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#leftColumn {
    clear: none;
    float: left;
    margin-left: 1.3215%;
    width: 100%;
    display: block;
}
#rightColumn {
    clear: none;
    float: left;
    margin-left: 1.3215%;
    width: 100%;
    display: block;
}
}

Answer 1

您可以使用具有绝对定位和负z-index的:before伪元素将包含div的背景颜色整个延伸到页面边缘。

#container {
    width: 100px;
    margin: 0 auto;
    background-color: #FFFFCC;
}
.stripe {
    background-color:#CCFFFF;
    height: 100px;
    position: relative;
}
.stripe:before {
    content:"";
    background-color:#CCFFFF;
    position: absolute;
    height: 100%;
    width: 4000px;
    left: -2000px;
    z-index: -1;
}

<div id="container">
  <div>one</div>
  <div class="stripe">two</div>
  <div>three</div>
</div>

Answer 2

可接受的答案似乎取决于固定的高度，这在当今的响应站点中很少见，因此以斯蒂芬·奥斯特米勒（Stephen Ostermiller）给出的答案为基础（谢谢！）以下代码对我有用，并且围绕着动态高度：

.container{
  background-color:#000;
  padding-bottom:30px;
}
.stripe {
  background-color:#000;
  position: relative;
  display: grid;
}
.stripe:before {
  content:"";
  background-color:#000;
  position: absolute;
  height: 100%;
  width: 200vw;
  left: -100vw;
  z-index: -1;
}

Answer 3

两种解决方案都会导致溢出。

试试这个：

.container{
  background-color:#000;
  padding-bottom:30px;
}
.stripe {
  position: relative;
  display: grid;
}
.stripe:before {
  content:"";
  background-color:#000;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width: 100vw;
  margin-left: -50%;
  transform: translateX(-50%);
  z-index: -1;
}

使用css将标题的背景颜色扩展到容器之外

3 个答案: