2016-04-22 16 views
2

Wie kommt das Body-Element nicht overflow-y: auto verwendet noch verhält es sich immer noch auf die gleiche Weise?Body-Tag-Überlauf (Auto, sichtbar?)

Ich glaube, es standardmäßig visible, aber wie funktioniert es eigentlich?

+0

es ist nicht notwendig, 'overflow: auto' Eigenschaft in' 'zu verwenden, es sei denn, Sie verwenden 'overfloe: hidden', weil Überlauf in Körper –

+0

sichtbar ist Es gibt im Grunde nichts anderes als der Körper angezeigt werden der 'sichtbare' Wert macht keinen Sinn. Daher ist es wahrscheinlich "auto". – JCOC611

+0

Ich folge nicht. Der Standardwert ist "sichtbar". Ich wundere mich, warum '' nicht 'overflow-y: auto' benötigt wie andere Elemente, um es scrollbar zu machen. – user1164937

Antwort

2

Das Tag body ist ein Sonderfall, da es als Root-Element des Dokuments betrachtet wird und die Browser diese so darstellen müssen, als wären sie auf.gesetzt.

Dies wird in der overflow documentation on W3 zurück in CSS 2.1 umrissen:

UAs müssen das ‚Überlauf‘ Eigenschaft gelten auf dem Stammelement zu dem Darstellungsfeld gesetzt. Wenn das Stammelement ein HTML- "HTML" -Element oder ein XHTML- "html" -Element ist und dieses Element ein HTML- "BODY" -Element oder ein XHTML- "body" -Element als untergeordnetes Element hat, müssen Benutzeragenten stattdessen die Überlaufeigenschaft anwenden vom ersten solchen untergeordneten Element zum Ansichtsfenster, wenn der Wert des Stammelements 'sichtbar' ist. Der sichtbare Wert für das Ansichtsfenster muss als "automatisch" interpretiert werden. Das Element, von dem der Wert propagiert wird, muss einen verwendeten Wert für 'Überlauf' von 'sichtbar' haben.

+0

Danke! Kennen Sie zufällig eine Ressource, die alle Sonderfälle für '' und '' -Tags auflistet? Ich habe bereits ein paar, wie '' s Breite und Höhe, die dem Ansichtsfenster entsprechen. Es wäre schön, wenn es einen einzigen Ort gibt, an den ich gehen kann, um ein tieferes Verständnis zu erlangen, anstatt W3 oder stack overflow durchforsten zu müssen, wenn ich auf sie stoße. – user1164937

+0

Nein, tue ich nicht. Ich bin ziemlich sicher, dass es nur die Breite/Höhe in HTML ist, und eine Position auf dem Körper, abgesehen von den Überlauf-Macken. Ich denke, Körper hat einen Standardrand, aber das ist offensichtlich. Ich kenne keine anderen Fälle, in denen die Standardwerte überschrieben oder anders gehandhabt werden, aber ich könnte falsch liegen. – Quantastical

+0

Sie könnten [hier] (https://www.w3.org/TR/WD-positioning-970131) starten, wo ich mit meiner Antwort angefangen habe. Auch [hier] (https://www.w3.org/TR/) zur Dokumentation aller W3C-Standards. Es sieht so aus, als ob die DOM-Dokumentation erst im November 2015 überarbeitet wurde und daher zuverlässig sein sollte –

1

Hatte für diesen einen Blick in einige White Papers. Das Element body ist ein spezielles Element im DOM und hat einige "pseudounveränderliche" Eigenschaften, auf die ich in der Antwort eingehen werde.

Zunächst einmal, W3C position documentation Punkte aus dem folgenden:

das Körperelement definiert einen speziellen impliziten Behälter mit den folgenden Eigenschaften:

  • Seine Position, Breite, Höhe und Ausschnittsbereich bestimmt durch die User Agent, und darf nicht geändert werden.
  • Errichtet ein Koordinatensystem für untergeordnete Elemente, mit dem Ursprung an der logischen des Dokuments oben, linke Ecke.

Mit diesem Wissen, graben wir in das, was die Standardeinstellungen für diese Eigenschaften für den Körper sind. Die position wird auf static gesetzt, was dazu führt, dass seine height und width Eigenschaften vom übergeordneten Element html geerbt werden.

fand ich diese Dokumentation ein wenig seltsam, dass ich den Wert der height auf dem Körperelement und setzt einen Rahmen um es ändern könnte:

body { 
 
    border: 1px solid black; 
 
    background-color: #1db3e7; 
 
    height: 100px; 
 
    width: 30em; 
 
    margin: 0 auto; 
 
    border-top: none; 
 
    padding: 1em; 
 
}
<body> 
 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis dolor eget risus ultrices mattis. Maecenas dolor est, malesuada ac efficitur sed, cursus quis nibh. Sed vulputate arcu molestie ipsum pharetra hendrerit vitae ac mauris. Duis quis purus quis elit varius convallis. Proin dictum nec purus eget accumsan. Suspendisse dignissim sollicitudin risus. Praesent nec quam in nisl dictum lobortis. Maecenas ultricies purus nec turpis egestas, ultrices elementum arcu pretium. Vestibulum id diam eu arcu placerat ultrices. Donec porta augue magna, eu tristique dui sodales in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. 
 

 
</body>

Doch egal Was position und overflow Ich habe festgelegt, der Text hat immer die Möglichkeit, über diese Grenze hinauszugehen. Dies spricht für die unveränderliche Eigenschaft der position Eigenschaft, aber es hat mich dazu gebracht, diese Aussage für height zu hinterfragen.

Schließlich ist das html Element ist das, was tatsächlich die Scrollbar macht erscheinen, basierend auf den body ‚s Breite und Höhe Abhängigkeit von dem html Elemente und seinem Standard position Wert. Der erste Eintrag zum Steuern des Bildlaufs der Seite wäre das erste untergeordnete Element des Elements body.