css - full - flex height 100




Высота CSS 100% с заполнением/разметкой (9)

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

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

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

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

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

О, и для записи я не очень люблю IE совместимость, чтобы (надеюсь) сделать вещи немного легче.

EDIT: С тех пор как был спрошен пример, вот самый простой из них, о котором я могу думать:

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

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


Граница вокруг div, а не поля страницы

Другое решение - мне просто нужна простая рамка вокруг края моей страницы, и я хотел 100% -ную высоту, когда контент был меньше этого.

Пограничный ящик не работал, и фиксированное позиционирование казалось неправильным для такой простой потребности.

Я закончил тем, что добавлял границу в свой контейнер, вместо того чтобы полагаться на край тела страницы - он выглядит так:

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

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

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

box-sizing: border-box;

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


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

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

JSBIN

Другим вариантом было бы использование опциональности box-sizing. Только проблема с обоими была бы, они не работают в IE7.


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

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

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


Пример Фрэнка немного смутил меня - в моем случае это не сработало, потому что я еще не понял позиционирования. Важно отметить, что элемент родительского контейнера должен иметь нестатическую позицию (он упомянул об этом, но я его не заметил, и это не было в его примере).

Вот пример, где дочернее задание и граница - использует абсолютное позиционирование, чтобы заполнить родительский 100%. Родитель использует относительное позиционирование, чтобы обеспечить точку отсчета для позиции ребенка, оставаясь в нормальном потоке - следующий элемент «больше содержимого» не затрагивается:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

Полезная link для быстрого изучения позиционирования CSS


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

.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>


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

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

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

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

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


Я узнал, как делать такие вещи, читая « 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>

Fiddle comment Nooshu


  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>




css