Блок на весь экран | CSS
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]
html, body < height: 100%; margin: 0; padding: 0; overflow: hidden; >body < overflow: auto; /* добавить полосу прокрутки */ > main
Блок шириной на весь экран монитора выровнять по центру окна браузера
У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.
header, nav, main, footer
Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:
Картинка на весь экран CSS
Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.
Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.
7 комментариев:
Agent_Smith Полезная штука, спасибо Вам) NMitra Для себя делала :)) Другие прописывают max-width для каждого отдельного тега (p, pre и т.п.), а не для всей колонки main. Анонимный С высотой блока не работает. просто по ширине экрана, ниже обрезается и никуда не скролится NMitra Ничего не поняла 🙂 Приведите пример, пожалуйста. Анонимный о Иван Сафронов не работает данный метод NMitra Так не может быть: на данной странице ведь работает. Покажите URL, где внедрён код и поясните что именно хотите сделать. Например, блок с заголовком «Популярное».
Особенности свойства height в %
Обычно свойство height , указанное в процентах, означает высоту относительно внешнего блока.
Однако, всё не так просто. Интересно, что для произвольного блочного элемента height в процентах работать не будет!
Чтобы лучше понимать ситуацию, рассмотрим пример.
Пример
Наша цель – получить вёрстку такого вида:
При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.
Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.
То есть, HTML-код требуется такой:
Как это реализовать? Подумайте перед тем, как читать дальше…
Придумали. Если да – продолжаем.
Есть разные варианты, но, возможно, вы решили сдвинуть .toggler влево, при помощи float:left (тем более что он фиксированной ширины) и увеличить до height: 100% , чтобы он занял всё пространство по вертикали.
Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с height: 100% …
Демо height:100% + float:left
.container < border: 1px solid black; >.content < /* margin-left нужен, так как слева от содержимого будет стрелка */ margin-left: 35px; >.toggler < /* Зададим размеры блока со стрелкой */ height: 100%; width: 30px; float: left; background: #EEE url("arrow_left.png") center center no-repeat; border-right: #AAA 1px solid; cursor: pointer; >А теперь – посмотрим этот вариант в действии:
Как видно, блок со стрелкой вообще исчез! Куда же он подевался?
Ответ нам даст спецификация CSS 2.1 пункт 10.5.
«Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto . Кроме случая, когда у элемента стоит position:absolute .»
В нашем случае высота .container как раз определяется по содержимому, поэтому для .toggler проценты не действуют, а размер вычисляется как при height:auto .
Какая же она – эта автоматическая высота? Вспоминаем, что обычно размеры float определяются по содержимому (10.3.5). А содержимого-то в .toggler нет, так что высота нулевая. Поэтому этот блок и не виден.
Если бы мы точно знали высоту внешнего блока и добавили её в CSS – это решило бы проблему.
/*+ no-beautify */ .container < height: 200px; /* теперь height в % внутри будет работать */ >Как растянуть блок по высоте css
Для того, что бы растянуть блок на всю высоту страницы, можно выставить height у выбранного элемента и у всех его предков вплоть до html — 100%. Но обычно так не делают, вместо этого используются не процентные значения а, единицы относительной длины — vh и vw. Эти аббревиатуры можно расшифровать, как viewport height и viewport width — высота и ширина области просмотра соответственно. 1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.
class="all-height">