Растянуть <div> на весь экран через padding

337
25 декабря 2016, 19:07

Контент страницы находится в contanier со свойствами

.wrap > .container {
  padding: 70px 15px 20px;
}

Т.е. каждый объект сдвигается на 15px по бокам. Как растянуть какой-то div в container под этим свойством на весь экран не обращая внимание на padding Желательно без JS / JQ, но не принципиально

<div class='contanier'>
  <div class='need_to'>Растяните меня на всю страницу</div>
</div>
Answer 1

Задать внешние отступы на величину paddinga: margin-left: -15px; margin-right: -15px;

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
} 
 
.wrap > .container { 
  padding: 70px 15px 20px; 
   
} 
 
.need_to { 
  margin-left: -15px; 
  margin-right: -15px; 
  background: #ccc; /* для наглядности */ 
}
<div class="wrap"> 
  <div class="container"> 
    <div class='need_to'>Растяните меня на всю страницу</div> 
  </div> 
</div>

Answer 2

Так годится?

.wrap > .container { 
  padding: 70px 15px 20px; 
  background: blue; 
} 
 
.need_to { 
  margin: 0 -15px; 
  background: yellow; 
}
<div class='wrap'> 
  <div class='container'> 
    <div>Не трогайте меня</div> 
    <div class='need_to'>Растяните меня на всю страницу</div> 
  </div> 
</div>

READ ALSO
Генерация квадратной таблицы

Генерация квадратной таблицы

Добрый вечер! У меня есть следующая страница:

319
async/await в парсере

async/await в парсере

Нужно спарсить информацию о пользователях сайта

321
Подключение геймпада к UWP проекту

Подключение геймпада к UWP проекту

Есть UWP проект, к нему нужно подключить поддержку управления геймпадом(контроллер XBOX), как это можно реализовать? Есть ли какие-нибудь библиотеки...

319