Höhenberechnung mit CSS Calc() Mathemethode

Ich erhalte ein CSS-Layout-Problem in meiner Anwendung, und reproduzieren Sie es mit jsFiddle.Höhenberechnung mit CSS Calc() Mathemethode

Im Grunde ist es ganz einfach, wie folgend:

html,body { 
 
    height: 100%; 
 
} 
 
.header { 
 
    background: yellow; 
 
    height: 50px; 
 
} 
 
.main { 
 
    background: green; 
 
    height: calc(100% - 50px); 
 
}

<div class="header">Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</div> 
 
<div class="main"></div>

Der Header div mit 50px auf feste Höhe eingestellt ist, und ich möchte, dass die Haupt-div die verbleibende Höhe einnehmen kann, so Ich benutze calc(100% - 50px).

Aber das Ergebnis ist ein bisschen seltsam für mich. Die erzeugte Höhe ist nicht genau und eine vertikale Bildlaufleiste wurde erstellt. Und ich habe den Rand oder die Polsterung überprüft, kein Problem.

Mein gewünschtes Ergebnis ist die ganze Seite in zwei Teile geteilt. Und keine Bildlaufleiste produziert.

Quelle

2017-01-16 Chris Bao

Es gibt einige margin (etwa 8px), die standardmäßig vom Browser festgelegt werden, und zwar auf 0.

html,body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.header { 
 
    background: yellow; 
 
    height: 50px; 
 
} 
 
.main { 
 
    background: green; 
 
    height: calc(100% - 50px); 
 
}

<div class="header">Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</div> 
 
<div class="main"></div>

Quelle

2017-01-16 02:38:26 Stickers

Wie @Pangloss sagt über, der Browser fügt automatisch Marge auf die Seite, die Ausgabe verursacht. Eine gute Möglichkeit, diese und andere Browser-Quarks zu verhindern, ist die Verwendung von Normalize.css in Ihrem CSS-Buildprozess oder die Verknüpfung mit dem CDN in der <head>.

Quelle

2017-01-16 03:34:30

Höhenberechnung mit CSS Calc() Mathemethode

Antwort

Verwandte Themen