Какие стили по умолчанию базовых тегов?

Question

[smithana]

Всем привет

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

Началось с того, что при вёрстке макета, мне понадобилось увеличить ширину контейнера бутстрапа для ПК разрешения до 1500px.
Я прописал media (min-width:1200px){ .container{ width: 1500px}} и продолжил вёрстку.
Позже заметил, что всё хорошо, когда ширина экрана больше 1500px. Но если ширина меньше 1500, то контейнер остаётся заданной ширины, а вот ширина базовых тегов html, body, header, main меньше и равна ширине экрана.

Сначала я начал грешить на свою кривую вёрстку, потом на бутстрап. В итоге сделал простейший пример без всех фреймворков и понял, что просто недопонимаю почему базовые теги, имеющие стандартный стиль display block не растягиваются на фиксированную ширину контейнера.
https://jsfiddle.net/utt8ehw6/

Синий это body, жёлтый header, белый container.


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

Спасибо.

Answer 1

[Cr2ed]

По умолчанию блочные элементы занимают всю ширину родительского блока.
Тот факт, что вы указали внутреннему блоку ширину больше чем body, не увеличивает ширину самого body. В данном случае он просто вылазит за пределы и тут срабатывает overflow, который по умолчанию visible.

Comments

[smithana]

как тогда быть?

вместе с контейнером задавать ширину Html?
например в случае с бутстрапом если я писал так:
@ media (min-width:1200px){ .container{ width: 1500px}}
то корректно будет написать:
@ media (min-width:1200px){ html, body{min-width: 1500px;} .container{ width: 1500px}}

?

[Cr2ed]

Ну я бы для начала немного не так использовал бы медиа квери. К примеру оnталкиваться не от min-width, а от max-width. К примеру

(min-width: 1500px) and (max-width: 2000px) {
width: 1500px
}

[smithana]

Cr2ed: боюсь не вариант.

контейнер должен быть такой ширины на ПК разрешении бутстрапа. Поэтому медиа 100% должны быть min-width:1200px.

Ну и плюс по твоему запросу всё будет криво, если у пользователя ширина экрана больше 2000px

Answer 2

[Lynn «Кофеман»]

но мы же видим, что синим залито всё окно.

Издержки обратной совместимости.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

https://www.w3.org/TR/CSS22/colors.html#background

Т.е. если не задавать никакого фона для html, то фактически стили фона для body применяются к html.