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

Это уже несколько дней сводит меня с ума, но на самом деле это проблема, с которой я сталкивался последние несколько лет: с помощью 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 пикселей по всем краям, при этом страница не становится достаточно большой, чтобы требовать полосы прокрутки.

787
задан 29.09.2019, 03:42

3 ответа

Я изучил, как сделать подобные вещи, читая" Pro HTML и Шаблоны разработки CSS ". Эти 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 комментарий

735
ответ дан 04.10.2019, 11:31
  • 1
    Превосходное решение, будет отмечать этого. Просто быстро добавленный это к jsfiddle.net/Rpdr9 для любого, кто хочет живую демонстрацию. Надеюсь Вы don' t ум. – Nooshu 05.03.2010, 02:08
  • 2
    В то время как @Toji didn' t заботятся о совместимости IE, я, к сожалению, имею к. Это решение didn' t первоначально работают под IE6. Добавление Декана Edwards' IE9.js к странице сделал эту работу. Теперь я просто должен надеяться и молиться что относительное/абсолютное расположение doesn' t завинчивают с чем-то в дочернем элементе... – Christopher Parker 20.05.2010, 08:34
  • 3
    - 1 (хотя это похоже на I' m меньшинство здесь: P). Это предполагает, что поле может быть абсолютно расположено; люди уже злоупотребляют pos:abs, как это, они don' t нужны эти боеприпасы. Возьмите этот пример: отделение " panels" с несколькими отделениями класса " panel" в нем. " panels" имеет {overflow:hidden; height:300px;}, и " panel" имейте варьирование contents/content-height, с {border:#000 твердый 1 пкс; float:left; поле-right:10px;}. Сделайте весь " panel" высота " panels" не теряя границы ни в какой точке. " panel" отделения не могут быть pos:abs' d здесь. @Marco' s решение работает на этот сценарий, все же. – eternicode 03.06.2011, 15:50
  • 4
    О, ничего себе, я получаю его. top:0, bottom:0, по существу " stretch" элемент. Я могу только заставить его работать с position:absolute хотя – Matt 12.09.2011, 22:42
  • 5
    Couldn' t Вы просто делают top:20px;bottom:20px;left:20px;right:20px; вместо того, чтобы использовать поля вообще? – chowey 13.03.2013, 14:50
  • 6
    @Brian: Вы don' t должен поместить общедоступный класс в отдельный модуль (это не Java), поэтому abstractionclass, могло бы быть очень чистое название модуля в Python. Для отмечания/документирования его непубличный, Вы могли снабдить префиксом имя модуля _: _nonpublic_module.py. dir() имена возвратов, которые не находятся в __all__ на всех версиях Python I' ve попробовал: Python 2.7, Python 3.3, Jython 2.5, Pypy 1.9. I' ve обновил мой ответ для обращения к точкам от вопроса. – jfs 02.02.2020, 17:19

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

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

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

<час>

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

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

7
ответ дан 04.10.2019, 11:31
  • 1
    Нет никакого обоснования, что произошло, где браузеры начали сходиться к последовательному поведению. Проверьте книгу, упомянутую в моем ответе. – Frank Schwieterman 28.01.2009, 11:55
  • 2
    @jer, Спасибо за объяснение. Я действительно ссылаюсь на это в своем ответе. Кто-то должен сказать Apple хотя, потому что они продолжают утверждать приложения, записанные этот путь и даже показывать их. Существует некоторое предположение, что этот язык был действительно помещен там только, чтобы гарантировать, что Adobe не мог стащить приложения Flash на iPhone. – Justin 15.01.2020, 06:25

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

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

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

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

, то Это на самом деле даст Вам 100% + 5 пкс + 5 пкс для высоты. Для обхождения этого, Вам нужен контейнер обертки.

<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>
21
ответ дан 04.10.2019, 11:31
  • 1
    @Alex: Но что делает внутреннее отделение (Заполненное) 100% внешнего div' s высота. Мой опыт состоял в том, что Вы просто получаете немного короткого отделения в более многочисленном полноразмерном отделении. – Lawrence Dol 28.01.2009, 15:19
  • 2
    Необходимо разработать приложения для iPhone в C, C++, Objective C или Objective C ++ (исходные приложения) или JavaScript (только выполняет ontop WebKit). Это ясно размечается в разделе 3.3.1 из соглашения разработчика. Вы don' t должен понравиться он, но that' s, как это. И it' s не условия лицензионного соглашения iOS 4.0, они вступили в силу, прежде 4.0 был выпущен, и обратитесь к чему-либо отправленному хранилищу после того времени. – jer 15.01.2020, 06:24

Теги

Похожие вопросы