HTML 5 Doctype messes up layout

Мой сайт был почти на 100% выполнен, когда я проверил его на W3C Validator. Получил ошибку, заявив, что я не объявлял Doctype. Поэтому я добавил HTML 5 <!DOCTYPE html>. ОК, ошибка исчезла. Но почему макет становится настолько запутанным, как?HTML 5 Doctype messes up layout

Пожалуйста, просмотрите его ниже.
http://itsdaffa.16mb.com/ -> Без DOCTYPE
http://itsdaffa.16mb.com/error.html -> С DOCTYPE

Я наткнулся на некоторые ответы о подобных вопросах, но не мог понять, так как в основном специфичны ошибки своего кода. Например, в this question пользователь решил свою проблему, удалив отрицательные значения свойств right, пока у меня их нет в моем коде.
Я полный новичок в этом, на самом деле это первый веб-сайт, который я строю с нуля. Мне отчаянно нужна помощь. Спасибо :)

источник

2015-06-07 Daffa Alif Pratama

Я редактировал вопрос, чтобы доказать, что это не дублировать. –

ok, флаг комментария удален. – Blake

Вам нужно будет сделать это в вашем CSS:

html, body { 
    height: 100% 
}

Причина в том, когда вы добавляете доктайп, то переходят из режима обратной совместимости в стандартном режиме. В стандартном режиме элементы html и body не имеют значения 100% высоты.

см.объяснение here

источник

2015-06-07 14:46:20 Jackson

Спасибо! Это решило мою проблему. Любая идея, почему я могу не только выбрать 'body' и должен включать' html' как 'height: 100%'? Связанный с этим вопрос не объясняет, почему он должен также выбрать тег 'html'. Спасибо. –

В основном тело может быть только размером с контейнер (элемент HTML). Если вы думаете об этом как о пакете карт; Пакет колод представляет элемент html, карты представляют собой элемент тела, содержащийся в html. Вам будет сложно разместить более 52 карт в палубе. По этой причине вам нужно будет увеличить размер карточного пакета. – Jackson

Спасибо! Все стало ясно. Но простите мою любопытство, в противоположность, почему я просто не могу выбрать только тег 'html'? –

HTML 5 Doctype messes up layout

ответ

Смежные вопросы