Question

我目前正在构建一个wordpress网站，我需要一个div的100％宽度背景（css颜色，没有图像）。我的div在容器内，我无法修改html。所以，我想知道css是否有任何方法可以做到这一点。我已经尝试过padding + margin hack，但它没有用。

HTML：

<div class="container">
 <div class="row-fluid">
   <div class="main span12">
       <div class="row-fluid blue"> <!--this is the div that needs the background-->
          <div class="span4">some content</div>
           <div class="span4">some content</div>
          <div class="span4">some content</div>
          </div>
       <div class="row-fluid">
           <div class="span12"> some other content, doesn't need the background</div>
       </div>
     </div>
  </div>
  </div>

非常感谢任何帮助。我试过这个：http://www.sitepoint.com/css-extend-full-width-bars/但它没有用。

Answer 1

基于CSS Tricks（Full Width Browser Bars）的这篇文章。

<强> HTML

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

<强> CSS

html, body {
    overflow-x: hidden;
}
.container {
  width:960px;
  margin: 0  auto;
  border:1px solid black;
}
.level {
  height:100px;
  background: #bada55;
}

.purple {
  position: relative;
  background: #663399;
}

.purple:before, 
.purple:after {
  content: "";
  position: absolute;
  background: #663399;  /* Match the background */
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
} 
.purple:before {
  right: 100%; 
}
.purple:after {
  left: 100%;
}

<强> Codepen Demo

支持应该是IE8＆amp;达

如何在twitter bootstrap的容器内有100％宽度的背景？

1 个答案: