Как в css сделать сайт на весь экран

Добавлено: 02.09.2017, 12:31 / Просмотров: 65254

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

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

  1. position: fixed;. Пример: онлайн линейка. div { position: fixed; top: 0; left: 0; width: 100%; height: сайт 100%; }
  2. единиц vw и vh div { width: 100vw; height: 100vh; }
  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]

    <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 class="full-screen"> <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 class="full-screen"> <div> <img src="адрес" alt="текст" /> </div> </div> </article> </main> <footer></footer> </body> <html>

И не нужны никакие лайтбокс для фото.

Другое решение: https://css-tricks.com/full-width-containers-limited-width-parents/


Источник: http://shpargalkablog.ru/2014/08/full-screen.html


Закрыть ... [X]

Блок на весь экран CSS Примеры - Шпаргалка блоггера Как сделать билеты для концерта своими руками


Как в css сделать сайт на весь экран Урок 1: Что такое CSS - Как создать свой сайт самому
Как в css сделать сайт на весь экран Html - Блок на весь экран в css - Stack Overflow на русском
Как в css сделать сайт на весь экран Как сделать что сайт был на весь экран?
Как в css сделать сайт на весь экран Как растянуть фон на всю ширину окна?
Как в css сделать сайт на весь экран Выравниваем сайт по центру экрана - t
Как в css сделать сайт на весь экран 20 самых красивых замков на воде
Как в css сделать сайт на весь экран M - Журнал для мам и детей
RigPix Database - Icom - IC-7800 «Сонник Деньги приснились, к чему снятся во сне Деньги» Азбука Windows 8 Быстрый набор на андроид - Телефоны DooGee - blogger Выбираем хороший учебник английского языка - PetitePolyglot Как в Контакте VK Как перенести Windows 8 с HDD на SSD Купить товары для детей и игрушки оптом в Новая жизнь старых футболок, 50 Идей - MAKE -SELF