HTML / CSS: почему тело не распространяется на его содержимое? - PullRequest
Новая
       21

HTML / CSS: почему тело не распространяется на его содержимое?

5 голосов
/ 29 января 2010

Возьмите этот тривиальный пример и откройте его: 

<html>
    <body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;">
        <div style="width: 8000px; border: 3px solid red;">Demo</div>
    </body>
</html>

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

Проблема в том, что по какой-то причине <body> не растягивается, чтобы содержать <div>. Он просто остается той же ширины, что и окно просмотра, и <div> переполняет его. Это, в свою очередь, приводит к центру фона в неправильном месте и обрезает его до размера области просмотра. Довольно ужасно, когда вы прокручиваете вправо.

Я уже нашел решение этой проблемы, но мне интересно, ПОЧЕМУ это так? Кажется, это одинаково для всех браузеров. Но, на мой взгляд, это довольно нелогично и в основном просто неправильно . Элемент контейнера должен быть достаточно большим, чтобы содержать его дочерние элементы - если, конечно, они не расположены абсолютно, и в этом случае они не участвуют в вычислениях макета.

Ответы [ 2 ]

8 голосов
/ 29 января 2010

Блоки просто не растягиваются горизонтально, чтобы вместить их дочерний контент вообще; никогда не иметь. (1) Это то, что происходит только по вертикальной оси. (2) Логически, оба измерения не могут быть растянутыми; один должен быть исправлен (по отношению к родителю). В CSS ширина элемента блока в нормальном потоке получается исключительно из родительского (минус отступы, поля, границы), а затем из этого следует высота, видя, сколько контента вы можете уместить в ширину блока и передавая его .

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

Для документов, корневым элементом которых является элемент HTML «HTML» или элемент HTML «HTML» XHTML, для которого вычислены значения «прозрачный» для «background-color» и «none» для «background-image», пользовательские агенты должны вместо этого используйте при вычислении фона для холста вычисленное значение свойств фона из первого HTML-элемента «BODY» этого элемента или дочернего элемента «body» XHTML и не должны рисовать фон для этого дочернего элемента. Такие фоны также должны быть закреплены в той же точке, какой они были бы, если бы они были нарисованы только для корневого элемента.

Это неприятный хак, потому что люди привыкли помещать фоны в «тело» и заставлять его заполнять область просмотра, даже если сам элемент <body> не представляет область просмотра.

(1) за исключением нескольких особых случаев, таких как float и position: absolute элементы без объявленного width.

(2), если вы сознательно не остановите это, установив height / overflow.

1 голос
/ 29 января 2010

Исключением для расширения является область просмотра. Ничто не расширяет область просмотра, если это не требуется для прямого или вложенного содержимого - это включает элементы div и table (например, display: table-cell на теле) - но не контейнер контейнера.

...