2016-12-05 4 views
4

Ich würde gerne die div height mit Prozentsätzen, die nicht auf Elemente in ihm abhängen. Ich habe eine feste Kopfzeile oben auf dem Bildschirm und ein zentriertes div. Aber Höhe in Prozent einstellen funktioniert nicht. Es wird nur vergrößert, wenn ich einige Elemente darin hinzufüge.div Höhe in Prozent funktioniert nicht auch mit 100perc html und Körper

Bitte helfen.

Ich habe diesen Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>lol</title> 
    <link rel="stylesheet" href="style.css"/> 
</head> 
<body> 
<div id="conteiner"> 
    <header> 
     <p>header</p> 
    </header> 
    <div id="main"> 
     <p>main info</p> 
    </div> 
</div> 
</body> 
</html> 

Und diese CSS.

html{ 
    width: 100%; 
    height: 100%; 
} 
body{ 
    overflow: hidden; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 

header{ 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    height: 10%; 
    border: solid red 1px; 
} 

#main{ 
    display: block; 
    width: 65%; 
    height: 80%; 
    border: solid green 1px; 
    margin: 8% auto 0 auto; 
} 
+0

Sie vh Einheiten verwenden könnten stattdessen von%, wenn es sich um einen Prozentsatz des Scren handelt, nach dem Sie suchen. –

Antwort

2

Sie haben vergessen, seine Eltern 100% Höhe zu machen.

#conteiner hat standardmäßig automatische Höhe, weil seine div Block. Und Standardhöhe ist die Höhe seiner Kinder. Wenn Eltern Höhe nicht manuell festgelegt ist, in Prozenten Kinder Höhe von Browser

#conteiner { 
    height: 100%; 
} 
+0

Jesus Christus, vergaß Container, thx viel. Noch eine Frage, bitte. Ich habe 10% Höhe Header. Wenn ich Rand oben für Container für 10% setze, liegt es nicht unter dem Header, sondern viel niedriger. Was ist das Problem? ty) –

+0

sein, weil die Margen in Prozent von den Blöcken Berechnung 'WIDTH' Eigenschaft :( – ixpl0

+0

ehm, dauerte es nicht bekommen) Can u mir bitte informieren Sie uns, wo kann ich über diese Details lesen) Ty –

1

an Ihrem Stil-Datei ignorieren Sie haben Stil zu schreiben, für div-Container Code wie

#container{ 
    height:100%; 
} 
Verwandte Themen