#o1 {
overflow: visible;
position: static;
height: 300px;
width: 300px;
background-color: #CCCCCC;
}
#o2 {
overflow: hidden;
height: 300px;
width: 300px;
background-color: #CCCCCC;
}
#o3 {
overflow: scroll;
height: 300px;
width: 300px;
background-color: #CCCCCC;
}
#o4 {
overflow: auto;
height: 300px;
width: 300px;
background-color: #CCCCCC;
}
#o5 {
overflow: auto;
height: 300px;
width: 300px;
}
#o5a {
width: 250px;
padding-left: 10px;
}
overflow:vsibible;
Nachteil, die Hintergrundfarbe wird durch Weite und Höhe definiert, während der gesamte Text sichtbar ist.
"In reprehenderit in voluptate duis aute irure dolor cupidatat non proident. Velit esse cillum dolore excepteur sint occaecat ullamco laboris nisi. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. In reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Consectetur adipisicing elit, ullamco laboris nisi qui officia deserunt. Ut enim ad minim veniam, cupidatat non proident. Quis nostrud exercitation ut enim ad minim veniam, eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, duis aute irure dolor ut labore et dolore magna aliqua. Ullamco laboris nisi sunt in culpa in reprehenderit in voluptate. Mollit anim id est
overflow: hidden
Nachteil, der Inhalt wird nicht angezeigt, wenn er größer ist als der Rahmen. In reprehenderit in voluptate duis aute irure dolor cupidatat non proident. Velit esse cillum dolore excepteur sint occaecat ullamco laboris nisi. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. In reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Consectetur adipisicing elit, ullamco laboris nisi qui officia deserunt. Ut enim ad minim veniam, cupidatat non proident. Quis nostrud exercitation ut enim ad minim veniam, eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, duis aute irure dolor ut labore et dolore magna aliqua. Ullamco laboris nisi sunt in culpa in reprehenderit in voluptate. Mollit anim id est laborum. Sed do eiusmod tempor incididunt quis nostrud exercitation ut aliquip ex ea commodo consequat. Cupidatat non proident. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. In reprehenderit in voluptate sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor consectetur adipisicing elit, excepteur sint occaecat. Ut enim ad minim veniam, in reprehenderit in voluptate sed do eiusmod tempor incididunt. Eu fugiat nulla pariatur. Sunt in culpa ut aliquip ex ea commodo consequat. Quis nostrud exercitation ut enim ad minim veniam, consectetur adipisicing elit.
overflow: scroll
Nachteil, es entstehen auch unschöne horizontale Scrollleisten. In reprehenderit in voluptate duis aute irure dolor cupidatat non proident. Velit esse cillum dolore excepteur sint occaecat ullamco laboris nisi. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. In reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Consectetur adipisicing elit, ullamco laboris nisi qui officia deserunt. Ut enim ad minim veniam, cupidatat non proident. Quis nostrud exercitation ut enim ad minim veniam, eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, duis aute irure dolor ut labore et dolore magna aliqua. Ullamco laboris nisi sunt in culpa in reprehenderit in voluptate. Mollit anim id est laborum. Sed do eiusmod tempor incididunt quis nostrud exercitation ut aliquip ex ea commodo consequat. Cupidatat non proident. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. In reprehenderit in voluptate sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor consectetur adipisicing elit, excepteur sint occaecat. Ut enim ad minim veniam, in reprehenderit in voluptate sed do eiusmod tempor incididunt. Eu fugiat nulla pariatur. Sunt in culpa ut aliquip ex ea commodo consequat. Quis nostrud exercitation ut enim ad minim veniam, consectetur adipisicing elit.
overflow: auto
Das ist eigentlich schon ganz schön.
In reprehenderit in voluptate duis aute irure dolor cupidatat non proident. Velit esse cillum dolore excepteur sint occaecat ullamco laboris nisi. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. In reprehenderit in voluptate ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Consectetur adipisicing elit, ullamco laboris nisi qui officia deserunt. Ut enim ad minim veniam, cupidatat non proident. Quis nostrud exercitation ut enim ad minim veniam, eu fugiat nulla pariatur. Cupidatat non proident, qui officia deserunt ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, duis aute irure dolor ut labore et dolore magna aliqua. Ullamco laboris nisi sunt in culpa in reprehenderit in voluptate. Mollit anim id est laborum. Sed do eiusmod tempor incididunt quis nostrud exercitation ut aliquip ex ea commodo consequat. Cupidatat non proident. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. In reprehenderit in voluptate sunt in culpa eu fugiat nulla pariatur. Duis aute irure dolor consectetur adipisicing elit, excepteur sint occaecat. Ut enim ad minim veniam, in reprehenderit in voluptate sed do eiusmod tempor incididunt. Eu fugiat nulla pariatur. Sunt in culpa ut aliquip ex ea commodo consequat. Quis nostrud exercitation ut enim ad minim veniam, consectetur adipisicing elit.
overflow:auto
Um sich hundertprozentig sicher zu sein, dass keine horizontalen Scrollleisten entstehen kann man auch div Elemente verschachteln.
<div id="o5">
<div id="o5a">hier kommt der Inhalt rein</div></div>
#o5 {
overflow: auto;
height: 300px;
width: 300px;
}
#o5a {
width: 250px;
padding-left: 10px;
}
Eu fugiat nulla pariatur. Excepteur sint occaecat velit esse cillum dolore lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. Duis aute irure dolor sed do eiusmod tempor incididunt quis nostrud exercitation. Sunt in culpa excepteur sint occaecat ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Cupidatat non proident, consectetur adipisicing elit, ut enim ad minim veniam. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Quis nostrud exercitation ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, cupidatat non proident. Sunt in culpa duis aute irure dolor velit esse cillum dolore. Raum für den Inhalt von id "o5"Eu fugiat nulla pariatur. Excepteur sint occaecat velit esse cillum dolore lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. Duis aute irure dolor sed do eiusmod tempor incididunt quis nostrud exercitation. Sunt in culpa excepteur sint occaecat ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Cupidatat non proident, consectetur adipisicing elit, ut enim ad minim veniam. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Quis nostrud exercitation ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, cupidatat non proident. Sunt in culpa duis aute irure dolor velit esse cillum dolore.
index