Как растянуть элемент на всю ширину css
Перейти к содержимому

Как растянуть элемент на всю ширину css

  • автор:

 

Как растянуть контейнер на всю ширину css

Аватар пользователя Вячеслав Межуревский

Есть несколько способов как сделать так, чтобы нужный блок занимал всю ширину видимой части браузера(viewport), или родительского блока. Если необходимо чтобы элемент занял всю ширину родительского элемента (который в свою очередь может быть задан в px или rem), то нужно просто указать:

Если необходимо что бы элемент занимал всю ширину видимой части браузера, то необходимо выставить:

Растянуть элемент на всю ширину

Как растянуть элемент на всю ширину если у родителя уже задано ограничение в ширине в 1000px? Причем, без абсолютного позиционирования или сделать так, чтобы в определенном моменте это позиционирование убрать, что бы он не был поверх нижних элементов, футера например.

 

A K's user avatar

Для современных браузеров можно использовать такой вариант:

для нужного элемента прописать стили:

Положите оба блока в один общий блок с шириной равной ширине экрана и задайте этому общему блока overflow-x: hidden. Затем блоку который хотите растянуть на ширину экрана задайте св-ва вроде таких

Такой блок не будет перекрывать нижеидущие по коду блоки. Если этот блок имеет заданную высоту и должен идти фоном, то следующие блоки можно, например, «поднять» отрицательным margin-top

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *