HTML дикий доктайп

Так я получил 2 файла divCeption.html и styles.css со следующим кодом:HTML дикий доктайп

body { 
 
    margin: 0; 
 
} 
 

 
#d1 { 
 
    background-color: #ff000a; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" href="styles.css"> 
 
    </head> 
 

 
    <body> 
 
     <div id="d1"></div> 
 
    </body> 
 
</html>

Этот код работает и делает то, что он suposed сделать: показать красный экран на экране.
Хорошо, проблема приходит сюда, обратите внимание на <!doctype html>, отсутствующий в начале HTML. Если я поместил doctype в начале HTML-страницы, страница забудет ... Может ли кто-нибудь объяснить мне, почему этот doctype дает проблемы?

источник

2014-09-17 Alpha2k

В каком браузере вы попробовали? Возможно, что по умолчанию, в зависимости от режима рендеринга, элементы HTML и BODY не имеют высоты и ширины, если не присутствуют. – krtek

Google chrome ... – Alpha2k

Возможно связано: http://stackoverflow.com/questions/10871898/why-cant-i-make-my-div-100-height-if-i-use-an-html5-doctype- how-do-i-get-it-1 – Raibaz

Я могу воспроизвести вашу проблему, и я решили его, добавив

html, body { 
    height: 100%; 
}

к моему коду CSS.

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

Даже лучше, чем добавлять линии CSS выше, вы должны использовать CSS reset.

источник

2014-09-17 20:31:41 Raibaz

Set

html, body { 
    height: 100%; 
}

источник

2014-09-17 20:30:15 Nit

Может быть, вы должны попытаться установить высоту и ширину элемента html и body:

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
#d1 { 
 
    background-color: #ff000a; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" href="styles.css"> 
 
    </head> 
 
    
 
    <body> 
 
     <div id="d1"></div> 
 
    </body> 
 
</html>

источник

2014-09-17 20:30:57 krtek

HTML дикий доктайп

ответ

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