Блог

В настоящее время я создаю сайт WordPress, где мне нужен фон 100% ширины (цвет css, без изображения) для div. Мой div находится внутри контейнера, и я не могу изменить HTML-код. Итак, мне было интересно, есть ли какой-нибудь способ с помощью css сделать это. Я уже пробовал взломать padding margin, но это не сработало.

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 / но это не сработало.

На основе этой статьи из CSS Tricks (полноразмерные панели браузера).

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

Поддержка должна быть IE8 и выше