css - poner - tabla de colores

Obtenga dos columnas con diferentes colores de fondo que se extienden hasta el borde de la pantalla

Question

Esta pregunta ya tiene una respuesta aquí:

• Bootstrap de ancho completo con 2 fondos diferentes (y 2 columnas) 2 respuestas
• Extienda la fila de arranque fuera del contenedor 4 respuestas

No es un duplicado de this .

Intento crear dos columnas en una página web con diferentes colores de fondo que se extienden hasta los bordes de la pantalla. Pero el contenido de las columnas debe permanecer dentro del ancho del cuadro de arranque.

Debe tener un aspecto como este:

Encontré this que casi funcionó, pero el contenido interno no estaba correctamente alineado dentro del ancho del recuadro, especialmente en pantallas grandes de más de 1600px. Básicamente terminó pareciéndose a:

A continuación, hay un fragmento de código de lo más cercano que podría llegar a funcionar, puede ser el enfoque equivocado por completo:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: aquamarine; padding: 0">
<div>
<div class="col-sm-8 col-sm-offset-1">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div><!-- .row -->
</div><!-- .container-fluid -->

Answer 1

Use otro contenedor DIV alrededor de un segundo contenedor ...

<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div style="background-color: aquamarine; padding: 0">
<div class="container">
<div class="row">
<div>
<div class="col-sm-9">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
</div>

EDITAR

Use un elemento psuedo como ..

.right:before {
right: -999em;
background: rebeccapurple;
content: '''';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}

http://www.codeply.com/go/YssQ5T7pxq

Ejemplo actualizado de Bootstrap 4

Pregunta similar: el contenedor Bootstrap llena los lados con colores