Ich spiele mit flexout. Ich wollte das typische Layout eines Header-Inhaltsbereich und Fußzeile erstellenFlex Layout 100% Höhe ist zu viel

Jetzt, wenn ich den Körper und die wichtigsten divs auf 100% Höhe setzen die Fußzeile ist abgeschnitten. Ist das ein Content-Bereich, siehe diese plnkr

<html style="height: 100%"> 
 

 
<body style="height: 100%"> 
 
    <div style="height:100%;display:flex;background-color: lightblue;flex-direction:column"> 
 
    <div style="width: 600">Header</div> 
 
    <div style="width: 500;display: flex;height: 100%"> 
 
     <div style="width:300">Nav</div> 
 
     <div>Content</div> 
 
    </div> 
 
    <div style="height:50px">footer</div> 
 
    </div> 
 
</body> 
 

 
</html>

[ enter image description here

was bin ich dabei?

Quelle

2017-01-27 Boas Enkler

Fügen Sie einfach diesen CSS:

body { 
    margin: 0; 
}

Die body standardmäßig über ein margin von 8px.

Die meisten Browser wird das Element mit den folgenden Standardwerte angezeigt werden:

body { 
    display: block; 
    margin: 8px; 
} 

body:focus { 
    outline: none; 
}

Kopiert von W3C - HTML body Tag.

Quelle

2017-01-27 08:28:15

verschossen, dass Mir ist richtig, mein schlechtes – James

Hier ist ein godd Ausgangspunkt für Sie:

Es bietet ein vollständig reaktions Flex Design mit Kopf- und Fußzeilen.

body,html{ 
 
    margin:0;padding:0; 
 
    height:100%; 
 
} 
 
.Flx{ 
 
    display:-webkit-flex; 
 
    display:-ms-flex; 
 
    display:flex; 
 
} 
 
.Wrap{ 
 
    margin:0 auto; 
 
    height:100%; 
 
    max-width:600px; 
 
    -webkit-flex-direction:column; 
 
    -ms-flex-direction:column; 
 
    flex-direction:column; 
 
} 
 
.Header{ 
 
    -webkit-flex:0 50px; 
 
    -ms-flex:1;flex:0 50px; 
 
    background:#ccc; 
 
} 
 
.Content{ 
 
    -webkit-flex:1; 
 
    -ms-flex:1; 
 
    flex:1; 
 
} 
 
nav{ 
 
    -webkit-flex:0 1 300px; 
 
    -ms-flex:0 1 300px; 
 
    flex:0 1 300px; 
 
    background:#eee; 
 
} 
 
.Footer{ 
 
    -webkit-flex:0 50px; 
 
    -ms-flex:1;flex:0 50px; 
 
    background:#ccc; 
 
}

<div class="Flx Wrap"> 
 
    <div class="Flx Header">Header</div> 
 
    <div class="Flx Content"> 
 
    <nav class="Flx">Nav</nav> 
 
    <div>Content</div> 
 
    </div> 
 
    <div class="Flx Footer">footer</div> 
 
</div>

Quelle

2017-01-27 08:36:51 Obsidian

thx für diesen Hinweis. Es ist ein sehr guter Ausgangspunkt für dieses Szenario. Aber mein Problem war, das Problem zu verstehen, warum es diesen Offset hat. So Ii markieren Sie den anderen Beitrag als Antwort (Erklärung mit dem Rand) –

Ja, alle Browser verwenden Standardeinstellungen, wenn Sie sie nicht angeben. Ich empfehle ein CSS-Reset wie Meyers: http://meyerweb.com/eric/tools/css/reset/ um sicherzustellen, dass Browser tun, was Sie erwarten, bevor Sie beginnen. – Obsidian

Sie wollen den Rand auf dem Body-Tag entfernen.

Um sicher zu gehen, dass Sie es in jedem Browser gleich aussehen lassen können Sie eine so genannte css reset.

Browser können unterschiedliche Standardstile haben. Diese kurze CSS-Datei setzt alle Standardstile auf den gleichen Wert zurück.

Lösung

body { 
 
    margin: 0; 
 
}

<html style="height: 100%"> 
 

 
<body style="height: 100%"> 
 
    <div style="height:100%;display:flex;background-color: lightblue;flex-direction:column"> 
 
    <div style="width: 600">Header</div> 
 
    <div style="width: 500;display: flex;height: 100%"> 
 
     <div style="width:300">Nav</div> 
 
     <div>Content</div> 
 
    </div> 
 
    <div style="height:50px">footer</div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-01-27 08:55:53

Flex Layout 100% Höhe ist zu viel

Antwort

Lösung

Verwandte Themen