Wiersz na całą szerokość przeglądarki

Wiersz na całą szerokość przeglądarki (Full Browser Width Bars) - By Chris Coyier
 
Element bloku jest naturalnie szeroki taki jak jego nadrzędny blok np jeśli #container jest szerokości 1000px to i element bloku będzie też takiej szerokości.

Chcielibyśmy zrobić tak, aby element rozciągnąć się na całą szerokość okna przeglądarki, ze względów estetycznych, a tekst ograniczyć wewnątrz aby na każdej rozdzielczości był czytelny.


Tak to ma wyglądać:

 

Jednym ze sposobów, aby to osiągnąć jest posiadanie wewnętrznego opakowania dla nagłówków:

<h2>
   <div>Header</div>
<h2>
<p>... text ... </p>

W ten sposób <h1> może pozostać na pełnej szerokości, ale <div> mogłyby zostać wykorzystane do ograniczenia szerokości do tej samej szerokości co <p>.

h1 div, p {
   width: 50%;
   margin: 0 auto;
}

Nie jest to najlepszy sposób, proponuje zrobić to następująco:

<section>
    <h2>Header</h2>
    <p>... text ... </p>
    <h2>Header</h2>
    <p>... text ... </p>
</section>

Ograniczymy szerokości z <section> , ale ograniczy to nam szerokość nagłówków, jak również miejsce naszego bloku.

section {
   width: 50%;
   margin: 0 auto;
}
h2 {
   position: relative;
   background: black;
}
h2:before, h2:after {
   content: "";
   position: absolute;
   background: black;  /* Match the background */
   top: 0;
   bottom: 0;
   width: 9999px;   /* some huge width */
}
h2:before {
   right: 100%;
}
h2:after {
   left: 100%;
}

Musimy być ostrożni z rozszerzeniem naszego bloku. Żeby nie spowodował nam pojawienia się poziomego paska przewijania użyjemy nastepującego atrybutu:

body {
    overflow-x: hidden;
}

Link do tutorialu

Link do LIVE DEMO