Вопросы Теги

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

Переключение ветвей несет с вами незафиксированные изменения. Перенесите сначала, запустите git checkout ., чтобы отменить их, или запустите git stash перед переключением. (Вы можете вернуть свои изменения с помощью git stash apply)

774
задан Abdelilah El Aissaoui 11 April 2018 в 08:49
поделиться

5 ответов

Я изучил, как сделать подобные вещи, читая" 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
ответ дан Community 29 September 2019 в 00:42
поделиться
  • 1
    @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 22 September 2012 в 17:09

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

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

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

<час>

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

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

7
ответ дан Lawrence Dol 29 September 2019 в 00:42
поделиться
  • 1
    @jer, Спасибо за объяснение. Я действительно ссылаюсь на это в своем ответе. Кто-то должен сказать Apple хотя, потому что они продолжают утверждать приложения, записанные этот путь и даже показывать их. Существует некоторое предположение, что этот язык был действительно помещен там только, чтобы гарантировать, что Adobe не мог стащить приложения Flash на iPhone. – Justin 27 July 2010 в 02:50

Соответственно 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
ответ дан BoltClock 29 September 2019 в 00:42
поделиться
  • 1
    Необходимо разработать приложения для 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 27 July 2010 в 02:42

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

 .box {margin: 8px; позиция: абсолютная; верх: 0; слева: 0; справа: 0; bottom: 0} 
 
 
 
 Появятся три вложенных поля. Попробуйте изменить размер браузера, чтобы убедиться, что они остаются правильно вложенными.
65
ответ дан 22 November 2019 в 21:19
поделиться
Другие вопросы по тегам:

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