Как растянуть div на всю высоту страницы

Как растянуть div на всю высоту страницы

Ширина и высота экрана на 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

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

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

Я всегда сталкиваюсь с затруднениями, когда необходимо растянуть блок на 100% высоты страницы. Например, у меня есть блок div , который необходимо растянуть, однако все немного сложнее, чем кажется. Итак, почему бы не найти кроссбраузерное решение по растягиванию блока на всю высоту страницы? Сегодня мы попытаемся найти это решение.

Скажем, у вас есть html-файл наподобие такого:

К нему прилагается CSS:

Что это нам дает, вы можете увидеть перейдя по:

Читайте также:  В какой программе можно редактировать пдф файлы

Как вы можете видеть, высота страницы определяется контентом и не растягивается на 100%, несмотря на то, что мы добавили блоку #content свойство height со значением 100% . Как так? Давайте немного поразмышляем об HTML. HTML – это всего лишь куча контейнеров вложенных один в другой. Итак, у нашей страницы сперва идет контейнер html , затем внутри контейнера html лежит контейнер body , ну и, наконец, в body расположен блок с идентификатором content . Когда мы помещаем контент в один из этих блоков, он растягивает этот блок и все другие блоки, содержащие этот блок. Итак, мы растягиваем блок

Чтобы исправить это, нам нужно назначить тегу body свою высоту. Но мы снова столкнемся с той же проблемой, ведь тег body лежит в теге html . Таким образом, чтобы растянуть блок

И на этом все. Посмотрите demo. Блок с контентом растягивается на всю высоту окна браузера.

Обратите внимание на объявление min-height:100%; : благодаря нему в случае, если контент выходит за пределы окна браузера, фон также будет растягиваться за контентом.

Не забываем и о старых браузерах IE, которые не понимают свойство min-heigt , для них необходимо добавить * html #content .

Довольно часто верстальщики сталкиваются с задачей растяжения тега div по высоте. Проблем обычно две.

2. Растянуть div на всю высоту страницы.

Для этого нужно установить высоту 100% для тегов head и body, а затем задать минимальную высоту тегу div. Минимальную, чтобы он мог растягиваться и дальше, если содержимого больше, чем на экран.

html, body <
height: 100%;
margin: 0;
padding: 0;
>

2. Div не растягивается по содержимому

Если внутри тега div будет просто текст или список или какой-нибудь другой тег со свойствами не выводящими его из потока, то все будет хорошо и div растянется как надо. Но если, например, для верстки в 3 столбца, внутри окажутся элементы div с указанным float:left, то содержащий их div перестанет растягиваться по содержимому. Потому что float выводит элементы из потока.

Читайте также:  Как поменять ттл на компе

Первое решение заключается в установке родительскому тегу overflow со значением hidden или auto

Второе решение: добавление после плавающих элементов еще одного div со свойством clear:both

Модифицированный второй способ. Вместо дополнительного блока с clear:both, основной блок делают самочищающимся с помощью псевдоселекторов :after и :before

.clear-fix:before, .clear-fix:after <
content: " ";
display: table;
>
.clear-fix:after <
clear: both;
>
/* Для стареньких IE 6 и 7, если кому-то еще вдруг актуально */
.clear-fix <
*zoom: 1;
>

Ссылка на основную публикацию
Как поставить старую версию скайпа
Программа Skype, как и любой другой активно развивающийся софт, постоянно обновляется. Однако не всегда новые версии выглядят и работают лучше...
Как повернуть диаграмму на 90 градусов
Научимся вращать (поворачивать) график функции относительно начала координат. Для примера используем график функции y=x*sin(10*x). Координаты (x'; y') в результате поворота...
Как повернуть купольную камеру видеонаблюдения
Страница 12 5 Регулировка положения видеокамеры Положение купольной видеокамеры можно регулировать по двум осям. Следя за изображением на мониторе, отрегулируйте...
Как поставить фотографию на контакт в андроид
На любом смартфоне реализована возможность установки изображения на телефонный контакт. Оно будет отображаться при поступлении входящих звонков от этого контакта...
Adblock detector