Как смешивать divs/rows с цветами фона текучей среды

Question

Я хочу какую-то функцию, которая будет действовать как закрытие определенного тега. Мне нужно уметь окрашивать фон в жидкое пространство, но его смешивать с кучей div. Как мне это сделать? Очевидно, закрытие div баннера, где он будет, будет беспорядок строк/столбцов, но я не уверен, как я должен это делать.

Я издевался над довольно грубым рисунком, чтобы попытаться объяснить это немного лучше.

crude colour example

белое пространство над Blackline должен быть серым. Это было бы очень просто, если бы не боковая панель. В настоящее время я использую среду Bootstrap 3.0 для гибкого дизайна. В противном случае я бы просто сделал боковую панель абсолютной позицией, и это было бы так.

Итак, как мне это сделать, поддерживая удобный для мобильных устройств макет?

<%--<div class="greyBanner">--%> 
<div class="container" style="margin-top: 50px;"> 
    <div class="row row-offcanvas row-offcanvas-right"> 

     <div class="col-xs-12 col-sm-8"> 
      <p class="pull-right visible-xs"> 
       <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> 
      </p> 

      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>Some heading</h1> 
        $PageSummary 
       </div> 

       <div class="1"> 
        <div class="2"> 
         <div class="3"></div> 
        </div> 
        <div class="4"></div> 
        <div class="5"></div> 
       </div> 


       <div class="col-lg-12"> 

        <div class="alert alert-danger alert-dismissable"> 
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
         Important Update:<br/> 

         <p>Message and colour changed from the CMS</p> 
        </div> 
       </div> 


       <div class="col-lg-12"> 
        <%--$SearchForm--%> 
        <select style="width:100%" id="e2" data-placeholder="Search..."> 
         <option value=""></option> 
         <% loop Doc_Resources %> 
          <option value="$Title">$Title</option> 
         <% end_loop %> 
         <% loop Doc_Forms %> 
          <option value="$Title">$Title</option> 
         <% end_loop %> 
         <% loop Doc_Policies %> 
          <option value="$Title">$Title</option> 
         <% end_loop %> 
        </select> 
       </div> 


       <div class="col-lg-12"> 

        <ul class="nav nav-tabs"> 
         <li class="active"><a href="#pane1" data-toggle="tab">Resources</a></li> 
         <li><a href="#pane2" data-toggle="tab">Forms</a></li> 
         <li><a href="#pane3" data-toggle="tab">Policies</a></li> 
        </ul> 

       </div> 

       <%--</div> Close grey banner--%> 

Answer 1

Возможно, разделив фон на две части, раскраски фона, как вы хотели бы, то плавающий правильный элемент безoverflow:hidden на контейнер может работать. Таким образом, правый элемент может быть вне контейнера.

Rough Example Here