Блок на весь экран | CSS

Ширина и высота экрана на 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) { /* стиль имеет смысл, когда ширина экрана больше 1200px, к тому же не нужно придумывать решения для IE7 и ниже */ 
        .full-screen {
          width: 50vw;
          margin-left: 50%;
        }
        .full-screen > div {
          width: 100vw; /* включает в себя полосу прокрутки от body */ 
          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/

в f t
наверх ↑

7 комментариев:

Agent_Smith
Полезная штука, спасибо Вам)
NMitra
Для себя делала :)) Другие прописывают max-width для каждого отдельного тега (p, pre и т.п.), а не для всей колонки main.
Анонимный
С высотой блока не работает. просто по ширине экрана, ниже обрезается и никуда не скролится
NMitra
Ничего не поняла :) Приведите пример, пожалуйста.
Анонимный
о
Иван Сафронов
не работает данный метод
NMitra
Так не может быть: на данной странице ведь работает. Покажите URL, где внедрён код и поясните что именно хотите сделать. Например, блок с заголовком "Популярное"...