TryIt Editor v2.0 - CSS-Eigenschaft overflow-y

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div.scroll {
      background-color: #8ebf42;
      height: 70px;
      width: 150px; 
      overflow-y: scroll;
      }
      div.hidden {
      background-color: #8ebf42;
      height: 70px;
      width: 150px;   
      overflow-y: hidden;
      }
      div.auto {
      background-color: #8ebf42;
      height: 70px;
      width: 150px;  
      overflow-y: auto;
      }
      div.visible {
      background-color: #8ebf42;
      height: 70px;
      width: 150px; 
      overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-y</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <h3>overflow-y: auto</h3>
    <div class="auto">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <h3>overflow-y: visible</h3>
    <div class="visible">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
  </body>
</html>