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 пикселей по всем краям, при этом страница не становится достаточно большой, чтобы требовать полосы прокрутки.
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 комментарий
Это - один из прямых идиотизмов CSS - я должен все же понять обоснование (если кто-то знает. объясните).
100% означают 100% контейнерной высоты - к которому добавляются любые поля, границы и дополнение. Таким образом, эффективно невозможно получить контейнер, который заполняется, это - родитель и который имеет поле, границу или дополнение.
Примечание также, устанавливая высоту известно непоследовательно между браузерами, также.
<час>Другая вещь я учился, так как я отправил, это - то, что процент относителен контейнер длина , то есть, это - ширина, делая процент еще более бесполезным для высоты.
В наше время, спидобарограф и единицы области просмотра VW более полезны, но все еще особенно полезны для чего-либо кроме контейнеров верхнего уровня.
-
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>
-
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
top:0,bottom:0, по существу " stretch" элемент. Я могу только заставить его работать сposition:absoluteхотя – Matt 12.09.2011, 22:42top:20px;bottom:20px;left:20px;right:20px;вместо того, чтобы использовать поля вообще? – chowey 13.03.2013, 14:50abstractionclass, могло бы быть очень чистое название модуля в 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