Höhe Prozentsatz mit divs

Ich habe Probleme mit divs und Prozentsätzen. Ich verstehe nicht, wie die divs zu erweitern oder zu setzen, so dass es die volle Größe des Bildschirms wäre. Es hängt an der Spitze des Browsers, wenn ich es anschaue. Was mache ich? sowieHöhe Prozentsatz mit divs

HTML 
    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>BasicArchitect</title> 
     <link rel="stylesheet" type="text/css" href="style.css" 
     </head> 
     <body> 
     <div id="container"> 

     <div class="header"> 

     </div> 

     </div> 

     </body> 
     </html> 

CSS 
    body{ 
     height:100%; 
     width:100%; 
     margin: 0; 
     padding: 0; 
} 
    #container{ 
     height:90%; 
     width:100%; 
     margin:auto; 
     background-color:white; 
     border-style: solid; 
} 
    .header{ 
     height:50%; 
     margin:auto; 
     background-color: red; 
     border-style: dashed; 
}

Quelle

2017-04-30 jonmo1990

Sie auch hinzufügen müssen verwenden können 'html {height: 100%;} '. – Stickers

Es hat funktioniert. Vielen Dank. Können Sie mir erklären, warum ich html {height: 100%;} hinzufügen musste? – jonmo1990

Sizing der Körper height: 100% hat nicht wirklich etwas tun, es sei denn, wenn Sie html ‚s Höhe auf 100% gesetzt. Die Messung, die Sie suchen, ist Viewport Height, oder vh für kurz.

Sie wollen body { height: 100% } ersetzen mit body { height: 100vh }

Quelle

2017-04-30 22:42:45

Abgesehen von Prozentsätzen, Sie viewport Einheiten wie vh und vw

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#container { 
 
    height: 90vh; 
 
    margin: auto; 
 
    background-color: white; 
 
    border-style: solid; 
 
} 
 

 
.header { 
 
    height: 50vh; 
 
    margin: auto; 
 
    background-color: red; 
 
    border-style: dashed; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>BasicArchitect</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css" </head> 
 

 
    <body> 
 
    <div id="container"> 
 

 
     <div class="header"> 
 

 
     </div> 
 

 
    </div> 
 

 
    </body> 
 

 
</html>

Quelle

2017-04-30 22:54:30

Höhe Prozentsatz mit divs

Antwort

Verwandte Themen