Die Anleitung zu CSS Overflow

CSS Overflow
CSS {overflow: visible}
CSS {overflow: hidden}
CSS {overflow: scroll}
CSS {overflow: auto}
CSS overflow-x, overflow-y

1. CSS Overflow

Wenn die Inhalt eines Element größer als den durch ein Element angebotenen ist, kann die Inhalt überlaufen.CSS overflow ermöglicht Sie, den Verhalten des Element in diesen Situation einzustellen.

Achtung: CSS overflow funktioniert mit den Block-Element, das die spezielle Höhe feststellt.

Die möglichen Werten von CSS overflow:

visible
hidden
scroll
auto

2. CSS {overflow: visible}

CSS {overflow: visible}: (Standardmäßig). Wenn die Inhalt des Element größer als den durch Element angebotenen Raum ist, wird es überlaufen. Das ist das Standardverhalten.

overflow-visible-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>
      <style>
         div {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 10px;
         }
      </style>
   </head>
   <body>
       <h1>CSS {overflow:visible} (Default)</h1>
       <hr/>
       <div style="width: 200px; height: 100px; overflow: visible">
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
       </div>
   </body>
</html>

3. CSS {overflow: hidden}

CSS {overflow: hidden}: Die Inhalt, die den Raum des Element überläuft, wird versteckt werden.

overflow-hidden-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>
      <style>
         div {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 10px;
         }
      </style>
   </head>
   <body>
       <h1>CSS {overflow:hidden}</h1>
       <hr/>
       <div style="width: 200px; height: 100px; overflow: hidden">
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
       </div>
   </body>
</html>

4. CSS {overflow: scroll}

CSS {overflow: scroll}: Der Browser erstellt eine Bildlaufleiste für Element. Der Benutzer kann die Bildlaufleiste benutzen um den verbleibenden Inhalt zu sehen.

Achtung: Für die meisten Browser und das Betriebssystem tritt die Bildlaufleiste des Element immer auf , auch wenn der Inhalt des Element kleiner als den durch Element angebotenen Raum. Die Ausnahme passiert bei dem Betriebsystem Mac OSX Lion. Die Bildlaufleiste trifft auf wenn nötig.

overflow-scroll-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>
      <style>
         div {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 10px;
         }
      </style>
   </head>
   <body>
       <h1>CSS {overflow:scroll}</h1>
       <hr/>
       <div style="width: 200px; height: 100px; overflow: scroll">
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
       </div>
   </body>
</html>

5. CSS {overflow: auto}

CSS {overflow: auto}: Ähnlich wie 'scroll' tritt die Bildlaufleiste nur auf wenn den Inhalt größer als den durch Element angebotenen Raum ist.

https://ex1.o7planning.com/css/overflow/overflow-auto-example.html

overflow-auto-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>
      <style>
         div {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 10px;
         }
      </style>
   </head>
   <body>
       <h1>CSS {overflow:auto}</h1>
       <hr/>
       <div style="height: 105px; overflow: auto">
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
             <br/>
             Michaelmas term lately over, and the Lord Chancellor
             sitting in Lincoln's Inn Hall. Implacable November weather.
             As much mud in the streets as if the waters
             had but newly retired from the face of the earth.
       </div>
   </body>
</html>

6. CSS overflow-x, overflow-y

Anstatt von der Benutzung von CSS overflow können Sie CSS overflow-x und CSS overflow-y benutzen. Die möglichen Werte von CSS overflow-x, CSS overflow-y ist so gleich wie CSS overflow

visible
hidden
scroll
auto

CSS overflow-x

CSS overflow-x wird benutzt um den Verhalten des Element einzustellen wenn sein Inhalt außer Element horizontal überläuft.

CSS overflow-y

CSS overflow-y wird benutzt um das Verhalten des Element einzustellen wenn sein Inhalt außer Element vertikal überfließen

Achtung: Sie können ein Wert-Paar für (overflow-x,overflow-y) festlegen aber der Browser wird diese Wert-Paar wieder rechnen. Denn die Wert-Paar, die Sie festgelegt haben, kann nicht pratisch sein. Z.B (visible, hidden) wird zu (scroll, hidden) wieder gerechnet.

Die folgende Tabelle fasst 2 Säule um. Die erste Säule enthaltet die festgelegten Wert-Paaren. Die zweite Säule enthaltet die Wert-Paaren, die der Browser wieder gerechnet hat.

Specified values	Computed values
(visible, visible)	(visible, visible)
(visible, hidden)	(scroll, hidden)
(visible, scroll)	(scroll, scroll)
(visible, auto)	(scroll, auto)

(hidden, visible)	(hidden, scroll)
(hidden, hidden)	(hidden, hidden)
(hidden, scroll)	(hidden, scroll)
(hidden, auto)	(hidden, auto)

(scroll, visible)	(scroll, scroll)
(scroll, hidden)	(scroll, hidden)
(scroll, scroll)	(scroll, scroll)
(scroll, auto)	(scroll, auto)

(auto, visible)	(auto, scroll)
(auto, hidden)	(auto, hidden)
(auto, scroll)	(auto, scroll)
(auto, auto)	(auto, auto)

overflow-x-y-example.js

function changeOverflowX(event) {
   value = event.target.value;
   var myDiv = document.getElementById("myDiv");
   myDiv.style.overflowX = value;
}
function changeOverflowY(event) {
   value = event.target.value;
   var myDiv = document.getElementById("myDiv");
   myDiv.style.overflowY = value;
}

overflow-x-y-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS overflow</title>
      <meta charset="UTF-8"/>
      <style>
         #myDiv  {
           background-color: #d6eaf8;
           padding: 5px;
           margin-top: 15px;
         }
      </style>
      <script src="overflow-x-y-example.js"> </script>
   </head>
   <body>
       <h2>CSS overflow-x, overflow-y</h2>
       <hr/>
       <div style="display: inline-block; width: 150px;">
         <p>Overflow-x:</p>
         <input type="radio" name="overflowX" value="visible" onClick="changeOverflowX(event)" checked/> Visible <br/>
         <input type="radio" name="overflowX" value="hidden" onClick="changeOverflowX(event)"/> Hidden <br/>
         <input type="radio" name="overflowX" value="scroll" onClick="changeOverflowX(event)"/> Scroll <br/>
         <input type="radio" name="overflowX" value="auto" onClick="changeOverflowX(event)"/> Auto <br/>
       </div>
       <div style="display: inline-block; width: 150px;">
         <p>Overflow-y:</p>
         <input type="radio" name="overflowY" value="visible" onClick="changeOverflowY(event)" checked/> Visible <br/>
         <input type="radio" name="overflowY" value="hidden" onClick="changeOverflowY(event)"/> Hidden <br/>
         <input type="radio" name="overflowY" value="scroll" onClick="changeOverflowY(event)"/> Scroll <br/>
         <input type="radio" name="overflowY" value="auto" onClick="changeOverflowY(event)"/> Auto <br/>
       </div>
       <div id="infoDiv">
       </div>
       <div id="myDiv" style="height: 50px; width:200px; overflow-x: visible;">
           The value of Pi is <br/>
           3.1415926535897932384626433832795029.

           The value of e is <br/>

           2.718281828459045235360287471352662
       </div>
   </body>
</html>