Körpergröße 100% zeigt vertikale Bildlaufleiste an

Aus Neugier, warum nimmt der Rand des #container div eine vertikale Bildlaufleiste im Browser an? Der Behälter ist viel kleiner als die Körperhöhe, die auf 100% eingestellt ist.Körpergröße 100% zeigt vertikale Bildlaufleiste an

Ich habe die Auffüllung und die Ränder auf 0 für alle Elemente außer dem #container festgelegt. Beachten Sie, dass ich absichtlich die absolute Positionierung auf dem #container div weggelassen habe. Wie berechnet der Browser in diesem Fall die Höhe des Körpers und wie wirkt sich die Marge darauf aus?

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
* { padding:0; margin:0;} 
html, body { height:100%; } 
#container 
{ 
    padding:10px; 
    margin:50px; 
    border:1px solid black; 
    width: 200px; 
    height: 100px; 
} 
</style> 
</head> 
<body> 
    <div id='container'> 
    </div> 
</body> 
</html>

Beispiel auch auf JSFiddle

Quelle

2012-10-20 neodymium

Siehe auch http://stackoverflow.com/questions/34357434/html-body-100-causing-scrollbar-to-appear –

If you paint the backgrounds of html and body (giving each its own color), werden Sie schnell feststellen, dass body zusammen mit #container nach unten verschoben wird, und #container sich nicht von der Spitze der body überhaupt versetzt ist. Dies ist ein Nebeneffekt von margin collapse, den ich im Detail behandeln here (obwohl diese Antwort beschreibt ein etwas anderes Setup).

Es ist dieses Verhalten, das verursacht, dass die Bildlaufleiste angezeigt wird, da Sie body für 100% der Höhe von html deklariert haben. Beachten Sie, dass die tatsächliche Höhe von body nicht betroffen ist, da die Ränder nie in die Höhenberechnungen einbezogen werden.

Quelle

2012-10-20 15:36:06 BoltClock

Bedeutet dies, dass die Höhen der Elemente auf einer Seite berechnet werden, beginnend mit dem Fenster, dann der Körper, dann Elemente innerhalb/oder über dem Körper? Werden alle Prozentangaben in px oder pt oder em umgewandelt? – TMB

@TMB: Eine 100% ige Höhe bei 'html' macht 100% des Ansichtsfensters (der Sichtbereich eines Browsers), und eine 100% ige Höhe auf 'body' macht es 100% seines Elternteils, was' html' ist. Alle Prozentsätze, die folgen, sind immer die Vorfahren eines Elements. Wenn Sie html oder body nicht 100% height setzen, verhalten sie sich wie jedes andere Blockelement. Einzelheiten finden Sie unter http://www.w3.org/TR/CSS21/syndata.html#percentage-units. % s und ems müssen schließlich beim Rendern alle in einen absoluten Wert konvertiert werden, damit ein Browser genau weiß, wie groß oder klein die Objekte auf dem Bildschirm zu messen und zu rendern sind. – BoltClock

@TMB: Im Fall von jsFiddle hat die Höhe des Ansichtsfensters die gleiche Höhe wie der Ergebnisbereich, da es sich im Grunde um einen Iframe handelt. – BoltClock

-7

fand ich eine schnelle Lösung: versuchen zu 99,99% statt 100%

Quelle

2013-12-08 11:57:12 user1254226

es klingt nicht gut. Körper ist standardmäßig verschoben – speedingdeer

Es gibt viele Gründe, warum dies eine schreckliche Idee ist, einschließlich beliebiger Höhenunterschiede pro Benutzerfenster, und dass interne Rundungsmethoden von Browser unterscheiden. –

Ein bisschen spät gesetzt Höhe, aber vielleicht hilft es jemand.

float: left; zu #container Hinzufügen entfernt die Scrollbar, wie W3C sagt:

• Ränder zwischen einem schwebenden Box und jedem anderen Feld nicht kollabieren (nicht einmal zwischen einem Schwimmer und seine in-Flow-Kinder).

Quelle

2014-03-04 08:37:00 Michel

Fügen Sie overflow: hidden; zu HTML und Text hinzu.

html, body { 
    height: 100%; 
    overflow: hidden; 
}

Quelle

2015-07-25 15:23:18 NexusRex

+21

Diese Lösung entfernt die Bildlaufleiste vollständig. sogar auf den Seiten, wo Scroll benötigt wird – Vil

Typo in der ersten Zeile, Überlauf: hidded –

Basierend auf @ BoltClock ♦ 's Antwort, ich regelte es durch den Rand Nullung ...
so

html,body, #st-full-pg { 
    height: 100%; 
    margin: 0; 
}

Werke, wo id "st-Voll pg" an eine zugeordnet ist Panel div (die weitere Panel-Überschrift und Panel-Körper enthalten)

Quelle

2017-01-04 11:05:30 harshvchawla

html, body { 
    height: 100%; 
    overflow: hidden; 
}

Wenn Sie möchten, um den Körper entfernen Sie den folgenden Stil Scrollen hinzufügen:

body { 
    height: 100%; 
    overflow: hidden; 
}

Quelle

2017-03-23 08:37:47

Das behob mein Problem, wo ich 2 vertikale Bildlaufleisten hatte. Setzen Sie html so, dass 'overflow: hidden' und leaving body all das behoben hat. Sowohl mein Körper als auch html haben 'Höhe: 100%'. – Karai17

Ich sah dieses Problem behoben, bevor Sie den gesamten Inhalt von body in einem div namens Wrap legte. Wrap-Stil sollte auf position: relative; min-height: 100%; festgelegt werden. Um die Position #container div 50px von oben und links zu platzieren, setzen Sie einen div-in-wrap mit einem Padding von 50px. Margins funktionieren nicht mit Wrap und dem div, das wir gerade gemacht haben, aber sie werden in und alles darin funktionieren.

here's my fix on jsfiddle.Diese

Quelle

2017-05-28 05:08:05 TheZacher5645

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

arbeitete für mich

Quelle

2017-10-13 20:06:49 fjkjava

Zugabe float:left; schön, wird aber stören zentrale horizontale Positionierung mit margin:auto;

, wenn Sie wissen, wie groß Ihre Marge ist, können Sie das in Ihrer Höhe Konto Prozentsatz mit cALC:

height: calc(100% - 50px);

Browser-Unterstützung ist gut, aber nur IE11 + https://caniuse.com/#feat=calc

Quelle

2017-10-20 11:03:39

Körpergröße 100% zeigt vertikale Bildlaufleiste an

Antwort

Verwandte Themen