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 ]

2 голосов
/ 08 февраля 2012

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

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

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

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

0 голосов
/ 18 декабря 2017

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

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

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

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

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}
0 голосов
/ 20 января 2012 
  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

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

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

...