CSS: Высота 100% с отступами/маргинами

Решение заключается в том, чтобы вообще не использовать высоту и ширину! Просто прикрепите внутренний блок с помощью свойств top, left, right и bottom, а затем добавьте отступы.

Вот пример кода:

.box {
  margin: 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

И HTML разметка:

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      Это создаст три вложенных блока. Попробуйте изменить размер окна браузера, чтобы увидеть, как они остаются правильно вложенными.
    </div>
  </div>
</div>

Таким образом, вложенные блоки будут корректно отображаться при изменении размера окна.

Лучший способ — использовать свойство calc(). Ваш случай будет выглядеть следующим образом:

#myDiv {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    padding: 5px;
}

Просто, понятно, без обходных решений. Не забудьте оставлять пробел между значениями и оператором (например, (100%-5px) нарушит синтаксис). Удачи!

Согласно спецификации W3C, свойство height относится к высоте видимой области. Например, на мониторе с разрешением 1280x1024 пикселей 100% высоты будет равняться 1024 пикселям.

Свойство min-height, в свою очередь, относится к общей высоте страницы, включая контент. Таким образом, на странице, где контент превышает 1024 пикселя, min-height: 100% будет растягиваться, чтобы вместить весь контент.

Следующая проблема заключается в том, что отступы (padding) и границы (border) добавляются к высоте и ширине в большинстве современных браузеров, кроме IE6 (который, хотя и достаточно логичен, не соответствует спецификации). Это называется моделью коробки (box model). Поэтому если вы укажете:

min-height: 100%;
padding: 5px; 

то фактически получите 100% + 5px + 5px по высоте. Чтобы обойти это, вам понадобится оберточный контейнер.

Пример кода:

<style>
    .FullHeight { 
       height: auto !important; /* IE 6 проигнорирует это */
       height: 100%;            /* IE 6 будет использовать это вместо min-height */
       min-height: 100%;        /* IE 6 проигнорирует это */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Привет, я в отступах.
   </div>
</div>

Такой подход позволит вам корректно задать высоту контейнера, учитывая отступы, и избежать нежелательного увеличения высоты из-за модели коробки.

Если вы хотите, чтобы элемент занимал полную высоту экрана с учетом различных свойств, таких как padding, margin и border, вот несколько решений:

1. Полная высота с использованием padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

В этом примере свойство box-sizing: border-box; позволяет учитывать padding в общей высоте контейнера, так что он по-прежнему будет занимать 100% высоты экрана.

2. Полная высота с использованием margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}

<div class="container">Hello world.</div>

Здесь мы используем calc(), чтобы вычесть margin из общей высоты окна, что позволяет контейнеру оставаться в пределах видимой области.

3. Полная высота с использованием border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

В этом случае, снова используя box-sizing: border-box;, мы гарантируем, что высота элемента будет считаться вместе с border, и он займет 100% высоты экрана.

Выбор метода зависит от ваших конкретных требований к дизайну и верстке.

Это одна из настоящих идиотий CSS — я до сих пор не понимаю, почему так устроено (если кто знает, поясните, пожалуйста).

100% означает 100% от высоты контейнера, к которому добавляются все отступы, границы и внутренние отступы (padding). Таким образом, фактически невозможно создать контейнер, который полностью заполнял бы родительский элемент, если у него есть отступ, граница или внутренние отступы.

Также стоит отметить, что установка высоты имеет репутацию непоследовательного поведения между браузерами.

Еще один момент, который я узнал с тех пор, как опубликовал это, заключается в том, что процентное значение измеряется относительно длины контейнера, то есть его ширины, что делает процентные значения еще менее полезными для высоты.

В настоящее время единицы измерения вьюпорта, такие как vh и vw, гораздо более полезны, но по-прежнему не особенно применимы для всего, кроме контейнеров верхнего уровня.