Как задать фон больше чем ширина родительского блока?

266

17 августа 2017, 20:18

Есть блок с контентом обернутый в container. И у него есть фоновый цвет который должен идти на всю ширину body(т.е. больше чем ширина контейнера-родителя). Как можно это сделать?

Answer 1

Решил проблему. Родительскому блоку задал

  .container {  
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

Answer 2

С помощью единиц вьюпорта и функции calc(). А именно, блоку, который необходимо растянуть, надо задать ширину 100vw и сдвинуть его влево по формуле (100vw - ширина_главного_контейнера) / -2

body { 
  margin: 0; 
} 
 
main { 
  width: 400px; 
  margin: auto; 
  background: #000; 
  height: 100vh; 
} 
 
header { 
  background: #ccc; 
  width: 100vw; 
  margin-left: calc((100vw - 400px) / -2); 
} 
 
.container { 
  padding: 1em; 
  margin: auto; 
  width: calc(400px - 2em); 
} 
 
.container p { 
  margin: 0; 
}

<main> 
  <header> 
    <div class=container> 
      <p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام </p> 
    </div> 
  </header> 
</main>