CSS: 100% высота / ширина DIV внутри граничного div создает вертикальные, но не горизонтальные полосы прокрутки - PullRequest
Новая
       16

CSS: 100% высота / ширина DIV внутри граничного div создает вертикальные, но не горизонтальные полосы прокрутки

2 голосов
/ 03 марта 2011

Привет и спасибо за прослушивание.Это не срочный вопрос для меня, мне просто интересно, почему следующий код делает то, что делает.Я хотел иметь рамку (или поле) вокруг видимой страницы и вложенный DIV, где "100% высота и ширина" относится к внутренней части этой границы (для дальнейшего вложения). 

<html>
  <body style='height:100%; width:100%; margin:0;'>
    <div style='border:5px solid green'>
      <div style='height:100%; width:100%;'>
      </div>
    </div>
  </body>
</html>

Очевидно,Я (думаю) знаю блочную модель и что означает 100% (здесь: блок контента первого DIV), и я знаю, как решить проблему, используя абсолютное позиционирование.

Но что я не делаю?t понять: почему в Chromium и Firefox я получаю вертикальную полосу прокрутки, но нет горизонтальную ?Похоже, что высота 100% во втором DIV не учитывает блок контента первого DIV (с учетом границы 5px), а скорее весь блок контента BODY.Однако при ширине 100% все работает так, как я думал - горизонтальная полоса прокрутки не появляется.

Может ли кто-нибудь меня просветить?Является ли это историческим поведением браузера?

РЕДАКТИРОВАТЬ после ответа ФредВилсона: Если вы укажете BODY абсолютные размеры, высота: 100px;width: 100px ', результат остается тем же: вертикальная граница увеличивает высоту 100px, но включается горизонтальная граница.Я пытаюсь перечитать мелкий шрифт спецификации CSS , но пока не вижу разницы между обработкой по высоте и ширине.

Слева: тег BODY в Firebug;справа: первый тег DIV в Firebug.
BODY tag in Firebug First DIV tag in Firebug

1 Ответ

1 голос
/ 03 марта 2011

Самый простой способ увидеть, как это делается намеренно, - открыть Инструменты разработчика Chrome и проверить теги BODY и DIV.Обратите внимание, что в моем примере chrome показывает ширину BODY и ширину div, равную 297px.Тем не менее, высота тела составляет 275 пикселей, а DIV - 285 пикселей.

Showing Body Showing Div

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

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

Однако, поскольку существует много других переменных, которые необходимо учитывать для высоты, и поскольку высота являетсяТрудно рассчитать в каком-то смысле, оба браузера используют точные определения CSS.

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

Редактировать: TL; DR В этом случае для расчета ширины используется режим quirksmode.Установка строгого типа документа создаст новый набор проблем, таких как необходимость установить высоту и ширину html на 100% и убедиться, что высота и ширина 100% находятся на каждом элементе DOM в цепочке.У вас также будут обе полосы прокрутки, так как DOM будет соблюдаться.

...