2016-12-27 6 views
0

wenn ich dies in meine CSS-Datei schreibe.Hintergrund decken den gesamten Bildschirm nur durch Hintergrundeigenschaft?

html { 
    background: black; 
} 

Die schwarze Farbe wird meinen ganzen Bildschirm abdecken. Aber zu dieser Zeit, mein html Element hat keine wirkliche height.the height Eigenschaft ist 0.

Für einen anderen Htmlelement wie div, das müssen beide hat die echte height und width Eigenschaften, die die background-color Werke machen.

Warum dieser Unterschied zwischen body, html und div?

Ich denke,

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

ist der einzige Weg, um die gesamte Bildschirm Hintergrundfarbe zu machen.

+1

HTML-Tag (oder Körper) hat standardmäßig keine wirkliche Höhe. Div hat nur dann keine wirkliche Höhe, wenn es Inhalt hat. Die Lösung ist in der Tat zu zwingen, den HTML/Körper 100% Höhe/Breite zu haben. Besser, es am Körper dann auf HTML zu verwenden, denke ich. – Kinnza

+0

Ich verstehe nicht ganz, was das Problem ist? Was versuchst du zu erreichen? Bitte erstellen Sie [mcve] des Problems, dem Sie gegenüberstehen. Wenn Sie background-color für html-element verwenden, wird die ganze Seite diese Farbe haben: https://jsfiddle.net/wwjtx6yy/ – Esko

+0

Die Hintergrundfarbe hat gut mit dem HTML-Tag funktioniert, das keine wirkliche Höhe hat. Aber wenn ein Div keine echte Höhe hat, funktioniert die Hintergrundfarbe nicht. – Loatheb

Antwort

0

Zunächst einmal gibt es keinen Unterschied zwischen HTML, Body oder Div-Element in Bezug auf ihre Präsentation. wie html und body, div height und width ist standardmäßig nicht auf nichts eingestellt. Wenn Sie es nicht selbst einstellen und kein Inhalt darin ist, können Sie seine Hintergrundfarbe nicht sehen.

Beispiel:

.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>

Ich hoffe, das einige Ihrer Zweifel klar werden.

Verwandte Themen