Körpergröße 100% mit vertikaler Bildlaufleiste

Question 1

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

Question 2

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.

Question 3

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).

Question 4

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)

Question 5

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

Question 6

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

Das hat bei mir funktioniert

Question 7

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

Question 8

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;
}

Question 9

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 .

Question 10

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.

Question 11

/*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;
}

Question 12

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

Question 13

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

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

Question 14

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

Answer 1

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

Answer 2

Siehe auch stackoverflow.com/questions/34357434/…

Matt Browne

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

1

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

BoltClock

Answer 7

8

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

Dan Dascalescu

Answer 8

1

@ Daniel Albuschat: Ich fühle mich geehrt!

BoltClock

Answer 9

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).

Answer 10

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)

Answer 11

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

Answer 12

Warum 50px? Magische Zahl.

Ivan Rubinson

Answer 13

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

Clay

Answer 14

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

Answer 15

2

Wenn Sie eine Fußzeile haben, wird diese entfernt

Alexander

Answer 16

1

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

Vikash Pal
quelle

Answer 17

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

Answer 18

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

Answer 19

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 .

Answer 20

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.

Answer 21

/*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;
}

Answer 22

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

Answer 23

-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

Answer 24

42

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

Vil

Answer 25

1

Tippfehler in der ersten Zeile, Überlauf: versteckt

Tim Grant

Answer 26

-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

Answer 27

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

Körpergröße 100% mit vertikaler Bildlaufleiste

Antworten: