Растянуть блок на всю ширину css

Ширина и высота экрана на CSS

Растянуть блок на всю ширину и высоту окна браузера можно с помощью:

1. position: fixed; . Пример: онлайн линейка.
2. единиц vw и vh
3. начальной width и height тега html . По умолчанию height любого тега, в том числе html и body , равна его содержимому. Для того, чтобы элемент имел min-height: 100%; , должна быть указана height его родителя.

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]

Блок шириной на весь экран монитора выровнять по центру окна браузера

У многих сайтов, в том числе у "Шпаргалки блоггера" содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.

Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:

Картинка на весь экран CSS

Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.

Код немного доработан, опираясь на статью "Размер изображения меняется при изменении экрана браузера". Там же написан соответствующий вариант для видео.

Есть два блока. Первый блок имеет динамическую ширину, т.е. ширина зависит от содержимого. Второй блок должен быть растянут на всю остальную (свободную) ширину.

Как можно с помощью CSS растянуть второй блок на всю свободную ширину?

1 ответ 1

Знаю два хороших метода, как растянуть второй блок на всю свободную (максимальную) ширину:

Современный метод ― с помощью flexbox.

Один из необычных методов ― использовать float и overflow. Overflow создаёт отдельный контекст форматирования для выбранного элемента, тем самым локализуя действие свойства float внутри элемента к которому применён. Подробнее.

Уточнение: overflow должен быть единственным в родителе и находится после всех float.

Всем привет!
Сильно не пинайте — нигде не нашел как сделать, все что знал — перепробовал.

Задача. Есть два блока, вложенных друг в друга. У первого блока position: relative, у внутреннего absolute. Так же, у первого стоит ограничение по ширине. Не меняя два эти атрибуты, внутренний блок нужно растянуть на всю ширину браузера. Может кто подскажет, как сделать 🙂