2016-12-27 5 views
0

если я пишу это в моем файле css.фон покрывает весь экран только свойством фона?

html { 
    background: black; 
} 

черный цвет будет охватывать весь экран. Но в то время, мой html элемент не имеет реального height.The height свойство равно 0.

Для другого HTMLElement как div, который должен одновременно имеет реальные height и width свойства, которые делают background-color работы.

Почему эта разница между body, html и div?

Я думаю,

html { 
    height: 100%; 
    width: 100%; 
    background: black; 
} 

является единственным способом, чтобы сделать весь цвет фона экрана.

+1

Html тег (или тело) по умолчанию не имеет реальной высоты. Div не будет иметь реальной высоты либо только если у него есть контент. Решение состоит в том, чтобы заставить html/body иметь 100% высоту/ширину. Лучше использовать его на теле, а затем на html, я думаю. – Kinnza

+0

Я не совсем понимаю, в чем проблема? Чего вы пытаетесь достичь? Создайте [mcve] проблемы, с которой вы сталкиваетесь. Если вы используете фоновый цвет для html-элемента, вся страница будет иметь этот цвет: https://jsfiddle.net/wwjtx6yy/ – Esko

+0

фоновый цвет хорошо работал с тегом html, который не имеет реальной высоты. Но если div не имеет реальной высоты, фоновый цвет не работает. – Loatheb

ответ

0

Прежде всего, нет никакой разницы между элементом html, body или div относительно их представления. как html и body, высота и ширина div по умолчанию не установлены. Если вы не настроите его самостоятельно, и если внутри него нет содержимого, вы не сможете увидеть его цвет фона.

пример:

.empty{ 
 
    background-color: black; 
 
} 
 

 
.size-set{ 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: green; 
 
} 
 

 

 
.content-div{ 
 
    background-color: yellow; 
 
}
<div class="empty"></div> 
 

 
<div class="size-set"></div> 
 

 
<div class="content-div">content is here</div>

Я надеюсь, что это будет ясно некоторые из ваших сомнений.

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