css — Растянуть блок DIV по всей высоте?
Stack Overflow на русскомLoading…
- 0
- +0
- Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
- Справка Подробные ответы на любые возможные вопросы
- Мета Обсудить принципы работы и политику сайта
- О нас Узнать больше о компании Stack Overflow
- Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
- Войти
javascript — Как растянуть блок по высоте?
Stack Overflow на русскомLoading…
- 0
- +0
- Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
- Справка Подробные ответы на любые возможные вопросы
- Мета Обсудить принципы работы и политику сайта
- О нас Узнать больше о компании Stack Overflow
- Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
- Войти Регистрация
-
текущее сообщество
- Stack Overflow на русском справка чат
Блок на весь экран | CSS — Примеры
Ширина и высота экрана на CSS
Растянуть блок на всю ширину и высоту окна браузера можно с помощью:
position: fixed;
. Пример: онлайн линейка.div { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
- единиц
vw
иvh
div { width: 100vw; height: 100vh; }
- начальной
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]
<html> <head> <style> html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } body { overflow: auto; } main { min-height: 100%; } </style> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> <html>
width
проще, поскольку width
блочного элемента равно width
его родителя. У body
только нужно обнулить margin
и padding
.Блок шириной на весь экран монитора выровнять по центру окна браузера
У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.
<html> <head> <style> header, nav, main, footer { max-width: 1200px; margin: 0px auto; } </style> </head> <body> <header></header> <nav></nav> <main></main> <footer></footer> </body> <html>
Для того, чтобы контент выходил за пределы этих 1200px
, но был ограничен шириной окна браузера, достаточно такого кода:
<html> <head> <style> header, nav, main, footer { max-width: 1200px; margin: 0px auto; } @media (min-width: 1200px) { .full-screen { width: 50vw; margin-left: 50%; } .full-screen > div { width: 100vw; margin-left: -100%; } } </style> </head> <body> <header></header> <nav></nav> <main> <article> <div> <div> </div> </div> </article> </main> <footer></footer> </body> <html>
Картинка на весь экран CSS
Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.
Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.
<html> <head> <style> header, nav, main, footer { max-width: 1200px; margin: 0px auto; } @media (min-width: 1200px) { .full-screen { width: 50vw; margin-left: 50%; } .full-screen > div { width: 100vw; margin-left: -100%; }.full-screen img { display: block; max-width: 100%; height: auto; margin: 0 auto; } } </style> </head> <body> <header></header> <nav></nav> <main> <article> <div> <div> <img src="адрес" alt="текст" /> </div> </div> </article> </main> <footer></footer> </body> <html>
И не нужны никакие лайтбокс для фото.
Другое решение: https://css-tricks.com/full-width-containers-limited-width-parents/
html — CSS: div блок c background, растянутым по ширине и сжатым по высоте
Stack Overflow на русском Loading…- 0
- +0
- Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
- Справка Подробные ответы на любые возможные вопросы
- Мета Обсудить принципы работы и политику сайта
- О нас Узнать больше о компании Stack Overflow
- Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
- Войти Регистрация
-
текущее сообщество
- Stack Overflow на русском справка чат