CSS 100% высота с отступом / полем - PullRequest
Новая
       104

CSS 100% высота с отступом / полем

769 голосов
/ 28 января 2009

Это сводило меня с ума уже пару дней, но на самом деле это проблема, с которой я сталкивался последние несколько лет: как с помощью HTML / CSS сделать элемент шириной и / или высота, которая составляет 100% его родительского элемента и все еще имеет надлежащие отступы или поля?

Под «правильным» я подразумеваю, что если мой родительский элемент имеет высоту 200px и я указываю height = 100% с padding = 5px, я бы ожидал, что должен получить элемент 190px с border = 5px со всех сторон красиво центрируется в родительском элементе.

Теперь я знаю, что это не то, как стандартная блочная модель указывает, что она должна работать (хотя я хотел бы знать, почему именно ...), поэтому очевидный ответ не работает: 

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

Но мне кажется, что должен быть НЕКОТОРЫЙ способ надежного создания этого эффекта для родителя произвольного размера. Кто-нибудь знает способ выполнения этой (казалось бы простой) задачи?

О, и для записи, я не очень заинтересован в совместимости с IE, так что это должно (надеюсь) немного упростить ситуацию.

РЕДАКТИРОВАТЬ: Поскольку был запрошен пример, вот самый простой, который я могу себе представить: 

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

Задача состоит в том, чтобы черный ящик отображался с отступом 25 пикселей по всем краям, при этом страница не становилась достаточно большой, чтобы требовать полосы прокрутки.

Ответы [ 13 ]

727 голосов
/ 28 января 2009

Я научился делать такие вещи, читая " PRO HTML и CSS Design Patterns ". display:block является отображаемым значением по умолчанию для div, но я хотел бы сделать это явным. Контейнер должен быть правильного типа; Атрибут position равен fixed, relative или absolute. 

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}
<div class="stretchedToMargin">
  Hello, world
</div>

Скрипка от Nooshu's комментарий

357 голосов
/ 14 июня 2010

В CSS3 есть новое свойство , которое вы можете использовать для изменения способа, которым блочная модель рассчитывает ширину / высоту, оно называется box-sizing.

Устанавливая это свойство со значением «border-box», оно делает любой элемент, к которому вы применяете, не растягивать при добавлении отступа или границы. Если вы определите что-то с шириной 100px и отступом 10px, оно все равно будет иметь ширину 100px. 

box-sizing: border-box;

Смотрите здесь для поддержки браузера . Он не работает для IE7 и ниже, однако, я считаю, что поддержка IE7.js Дина Эдварда добавляет его поддержку. Наслаждайтесь:)

64 голосов
/ 10 апреля 2010

Решение - НЕ использовать высоту и ширину! Прикрепите внутреннюю рамку, используя верхнюю, левую, правую, нижнюю части, а затем добавьте поле. 

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>
37 голосов
/ 15 июня 2013

Лучший способ - использовать свойство calc (). Таким образом, ваш случай будет выглядеть так: 

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

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

21 голосов
/ 28 января 2009

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

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

Другая проблема заключается в том, что отступы и границы добавляются к высоте и ширине в большинстве современных браузеров, кроме ie6 (ie6 на самом деле вполне логично, но не соответствует спецификации). Это называется коробочной моделью. Так что если вы укажете 

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

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

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

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

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>
8 голосов
/ 15 января 2017

1. Полная высота с padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}
<div class="container">Hello world.</div>

2. Полная высота с margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}
<div class="container">Hello world.</div>

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>
7 голосов
/ 28 января 2009

Это одна из явных идиотий CSS - мне еще предстоит понять причину (если кто-то знает, пожалуйста, объясните).

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

Обратите внимание, что установка высоты, как известно, несовместима и между браузерами.

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

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

5 голосов
/ 30 ноября 2012

Другое решение заключается в использовании display: table, который имеет другое поведение блочной модели.

Вы можете установить высоту и ширину родительского элемента и добавить отступы, не расширяя его. У ребенка 100% высота и ширина минус отступы.

JSBIN

Другим вариантом будет использование свойства размера ящика. Единственная проблема с обоими - они не работают в IE7.

4 голосов
/ 29 октября 2013

Другое решение: Вы можете использовать процентные единицы для полей и размеров. Например: 

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

Основная проблема заключается в том, что поля будут немного увеличиваться / уменьшаться в зависимости от размера родительского элемента. Предположительно, функциональность, которую вы бы предпочли, состоит в том, чтобы поля оставались постоянными, а дочерний элемент увеличивался / уменьшался для заполнения изменений в интервале. Таким образом, в зависимости от того, насколько плотно вам нужен дисплей, это может быть проблематично. (Я бы также выбрал меньшую маржу, например, 0,3%).

2 голосов
/ 28 июня 2018

Сейчас 2018 год, здесь следует упомянуть новое горячее дерьмо, так как этот вопрос постоянно всплывает в Google.

Решение с flexbox (работает на IE11): ( или просмотр jsfiddle ) 

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

( CSS-сброс не обязательно важен для реальной проблемы.)

Важной частью является flex: 1 (в комбинации с display: flex у родителя). Как ни странно, самое правдоподобное объяснение того, как работает свойство Flex, я знаю из документации по реагированию , поэтому я все равно на нее ссылаюсь .

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...