Die Anleitung zu CSS Overflow

View more Tutorials:

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

View more Tutorials: