Körpergröße 100% mit vertikaler Bildlaufleiste

84

Aus Neugier, wenn man das folgende Beispiel betrachtet, warum wird durch den Rand des #container div eine vertikale Bildlaufleiste im Browser angezeigt? Der Behälter ist viel kleiner als die Körpergröße, die auf 100% eingestellt ist.

Ich habe die Auffüllung und die Ränder für alle Elemente außer dem #container auf 0 gesetzt. Beachten Sie, dass ich die absolute Positionierung auf dem #container div absichtlich weggelassen habe. Wie berechnet der Browser in diesem Fall die Körpergröße und wie wirkt sich der Rand 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

html css

— Neodym
quelle

Siehe auch stackoverflow.com/questions/34357434/…

— Matt Browne

65

Wenn Sie die Hintergründe von htmlund malen body(wobei jeder seine eigene Farbebody erhält ) , werden Sie schnell feststellen, dass diese zusammen mit nach unten verschoben #containerwird und #containerselbst überhaupt nicht von oben versetzt ist body. Dies ist ein Nebeneffekt des Randkollapses , auf den ich hier ausführlich eingehen werde (obwohl diese Antwort ein etwas anderes Setup beschreibt).

Es ist dieses Verhalten, das dazu führt, dass die Bildlaufleiste angezeigt wird, da Sie angegeben haben body, dass die Höhe 100% beträgt html. Beachten Sie, dass die tatsächliche Höhe von bodynicht beeinflusst wird, da Ränder niemals in die Höhenberechnung einbezogen werden.

— BoltClock
quelle

Bedeutet dies, dass die Höhe der Elemente auf einer Seite beginnend mit dem Fenster, dann dem Körper und dann den Elementen innerhalb / oder über dem Körper berechnet wird? Werden alle Prozentsätze in px- oder pt- oder em-Werte umgewandelt?

— TMB

5

@TMB: Bei einer Höhe von html100% wird das Ansichtsfenster (der Anzeigebereich eines Browsers) zu 100% und bei einer Höhe von body100% zu 100% des übergeordneten Fensters angezeigt html. Alle folgenden Prozentsätze sind immer die der Vorfahren eines Elements. Wenn Sie nicht 100% Höhe einstellen htmloder sich bodydann wie jedes andere Blockelement verhalten. Weitere Informationen finden Sie unter w3.org/TR/CSS21/syndata.html#percentage-units . % s und ems müssen schließlich alle beim Rendern in einen absoluten Wert konvertiert werden, damit ein Browser genau weiß, wie groß oder klein die Dinge auf dem Bildschirm gemessen und gerendert werden müssen.

— BoltClock

1

@neodymium: Das stimmt. Beide htmlund bodyverhalten sich auch wie jedes andere Element auf Blockebene.

— BoltClock

8

Wie soll das behoben werden? Indem Sie den Container schwimmen lassen, wie Michel vorschlägt ?

— Dan Dascalescu

1

@ Daniel Albuschat: Ich fühle mich geehrt!

— BoltClock

19

Ein bisschen spät, aber vielleicht hilft es jemandem.

Durch Hinzufügen float: left;zu #containerwird die Bildlaufleiste entfernt, wie W3C sagt:

• Die Ränder zwischen einer schwimmenden Box und einer anderen Box fallen nicht zusammen (auch nicht zwischen einem Schwimmer und seinen unterströmenden Kindern).

— Michel
quelle

18

Basierend auf der Antwort von @ BoltClock ♦ habe ich das Problem behoben, indem ich den Rand auf Null gesetzt habe ...
also

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

funktioniert, wenn die ID "st-full-pg" einem Panel-Div zugewiesen ist (das außerdem Panel-Überschrift und Panel-Body enthielt)

— harschvchawla
quelle

3

Hinzufügen float:left;ist schön, stört aber die zentrale horizontale Positionierung mitmargin:auto;

Wenn Sie wissen, wie groß Ihre Marge ist, können Sie dies in Ihrem Höhenprozentsatz mit calc berücksichtigen:

height: calc(100% - 50px);

Die Browserunterstützung ist gut, aber nur IE11 + https://caniuse.com/#feat=calc

— ben.tiberius.avery
quelle

Warum 50px? Magische Zahl.

— Ivan Rubinson

"Wenn Sie wissen, wie groß Ihre Marge ist." Ich glaube, das ist es, worauf sich OP mit dem 50px

— Clay

1

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

Das hat bei mir funktioniert

— fjkjava
quelle

2

Wenn Sie eine Fußzeile haben, wird diese entfernt

— Alexander

1

Ich habe eine Lösung gefunden: Polsterung hinzufügen: 1px 0; to body verhindert, dass vertikale Bildlaufleisten angezeigt werden

— Vikash Pal
quelle

0

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

Wenn Sie das Scrollen des Körpers entfernen möchten, fügen Sie den folgenden Stil hinzu:

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

— lalit bhakuni
quelle

Dies hat mein Problem behoben, bei dem ich 2 vertikale Bildlaufleisten hatte. Das Setzen von HTML zu haben overflow: hiddenund den Körper in Ruhe zu lassen, hat das behoben. Sowohl mein Körper als auch HTML haben height: 100%.

— Karai17

0

Ich habe gesehen, dass dieses Problem behoben wurde, bevor Sie den gesamten Inhalt von bodyin ein Div namens Wrap gelegt haben. Der Wrap-Stil sollte auf eingestellt sein position: relative; min-height: 100%;. Um #containerdiv 50px von oben und links zu positionieren, legen Sie eine div-Innenverpackung mit einer Polsterung von 50px ein. Ränder funktionieren nicht mit Wrap und dem Div, das wir gerade gemacht haben, aber sie funktionieren in #containerund alles darin.

Hier ist meine Lösung für jsfiddle .

— TheZacher5645
quelle

0

Inspiriert von @BoltClock habe ich dies versucht und es hat funktioniert, auch beim Vergrößern und Verkleinern.

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

Ich denke, bodywurde 20px nach unten verschoben.

— Evan Hu
quelle

0

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

— Walex996
quelle

0

Für diejenigen, die hierher kommen, um eine verständlichere Antwort zu erhalten, die sogar Codebeispiele enthält, ist diese Antwort (von hier kopiert ) für Sie.

Es sind kein JavaScript oder bestimmte Pixelwerte (wie z. B. 100px) erforderlich, nur reines CSS und Prozentsätze.

Wenn Ihr Div nur alleine da sitzt, height: 50%bedeutet dies 50% der Körpergröße. Normalerweise ist die Körpergröße Null ohne sichtbaren Inhalt, also sind 50% davon einfach Null.

Dies ist die Lösung (basierend darauf ) (kommentieren Sie die backgroundLinien aus, um eine Visualisierung der Polsterung zu erhalten):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Erweitern Sie das Snippet

Das Obige wurde so geschrieben, dass es immer noch die übliche Polsterung gibt. Sie können die Abmessungen des Rotes divauf einstellen 100%und trotzdem die Polsterung auf jeder Seite / jedem Ende sehen. Wenn Sie diese Polsterung nicht möchten, verwenden Sie diese (obwohl sie nicht gut aussieht, empfehle ich Ihnen, beim ersten Beispiel zu bleiben):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Erweitern Sie das Snippet

— FluorescentGreen5
quelle

-2

Fügen Sie overflow: hidden;zu HTML und Körper hinzu.

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

— NexusRex
quelle

42

Diese Lösung entfernt die Bildlaufleiste vollständig. sogar auf den Seiten, auf denen eine Schriftrolle benötigt wird

— Vil

1

Tippfehler in der ersten Zeile, Überlauf: versteckt

— Tim Grant

-9

Ich habe eine schnelle Lösung gefunden: Versuchen Sie, die Höhe auf 99,99% anstatt auf 100% einzustellen

— user1254226
quelle

Es gibt viele Gründe, warum dies eine schreckliche Idee ist, einschließlich willkürlicher Höhenunterschiede pro Benutzerfenster, und dass sich die internen Rundungsmethoden je nach Browser unterscheiden.

— Terra Ashley