|
|||
horiz. und vert. Skalierung der Seite bei DIV-Scrollbalken ?
Hallo,
DIV-Container soll automatisch Scrollbalken bei zu großem Inhalt erhalten. Dazu habe ich overflow:auto eingebaut. overfow:auto klappt aber nur mit absoluter Höhenangabe, wenn die Weite schon prozentual angegeben ist. wie zum Beispiel: height:450px; width:99%; Leider funktioniert damit die vertikale Skalierung der Seite für verschiedene Bildschirmauflösungen nicht mehr. Gibt es eine Lösung, sowohl Scrollbalken verwenden als auch Skalierung erreichen ? Danke für Hinweise Wolfgang |
Sponsored Links |
|
|||
Hier noch mal etwas genauer:
Ich habe 3 Container nebeneinader, die alle gleich hoch sein sollen. (Darüber liegen noch zwei Container mit je 15% Höhe über die ganze Breite des Bildschirms.) Nur wenn ich bei den 3 nebeneinander liegneden Containern die Höhe in 450px angebe, erreiche ich, dass diese gleich hoch sind. Bei Angaben für die Höhe 70%, hängt die Höhe einfach nur von der Inhaltsmenge in diesem Container ab. Scrollbar erscheinen nur bei dem mittleren Container. Die Bildschirmhöhe wird übrigens auch nicht ausgenutzt, obwohl 15+15+70=100% ergeben. Oder worauf bezieht sich die %-Angabe ? Als Beispiel hier der rechter Container: #divcontteaser { /*white-space:nowrap; */ /* kein Zeilenumbruch bei Leerzeichen */ font-size:12px; background-color:white; background-color:white; height:70%; width:13%; float:left; margin: 1px; padding:1px; border-top: 1px solid #cc1f2f; border-right: 1px solid #aa1f1f; border-bottom: 1px solid #aa1f1f; border-left: 1px solid #cc1f2f; } #divteaserkopf { background-color : #D9D9D9; height:5%; width:99%; float:left; margin: 1px; padding:1px; border-top: 1px solid #cc1f2f; border-right: 1px solid #aa1f1f; border-bottom: 1px solid #aa1f1f; border-left: 1px solid #cc1f2f; } #divteaserstart { /* font-size:0.8em; line-height:1.0em; */ background-color:white; height:90%; /*height:450px;*/ width:99%; float:left; overflow: auto; margin: 1px; padding:1px; border-top: 1px solid #cc1f2f; border-right: 1px solid #aa1f1f; border-bottom: 1px solid #aa1f1f; border-left: 1px solid #cc1f2f; } #divteaserfuss { background-color : #D9D9D9; height:5%; width:99%; float:left; margin: 1px; padding:1px; border-top: 1px solid #cc1f2f; border-right: 1px solid #aa1f1f; border-bottom: 1px solid #aa1f1f; border-left: 1px solid #cc1f2f; } /* Navigation Teaser */ /* ----------------- */ .teaser { background-color : #D9D9D9; margin: 1px; padding:1px; border-top: 1px solid #cc1f2f; border-right: 1px solid #aa1f1f; border-bottom: 1px solid #aa1f1f; border-left: 1px solid #cc1f2f; } |
|
|||
So wird was draus :
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>five divs</title> <style type="text/css"> .div1 {position:absolute; left:0%; width:100%; top:0%; height:15%; background-color:green; overflow:auto;} .div2 {position:absolute; left:0%; width:100%; top:15%; height:15%; background-color:blue; overflow:auto;} .div3 {position:absolute; left:0%; width:20%; top:30%; height:70%; background-color:red; overflow:auto;} .div4 {position:absolute; left:20%; width:30%; top:30%; height:70%; background-color:yellow; overflow:auto;} .div5 {position:absolute; left:50%; width:50%; top:30%; height:70%; background-color:gray; overflow:auto;} </style> </head> <body> <div class="div1"> div1 div1 div1 div1 div1 div1 div1 div1 div1 div1 </div> <div class="div2"> div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 </div> <div class="div3"> div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 </div> <div class="div4"> div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 div4 </div> <div class="div5"> div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 div5 </div> </body> </html> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DIV - Scrollbalken springt beim Refresh | supercop89 | Javascript & Ajax | 8 | 25.05.2010 13:01 |
div höhe - 2 scrollbalken vermeiden | grubentaucher | CSS | 4 | 07.04.2010 12:16 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
benötige waagerechten Scrollbalken im DIV | Sven4972 | CSS | 0 | 18.12.2005 15:24 |
csss seite in frame horiz. scrollbar | Holger (HMR) | CSS | 0 | 15.09.2005 16:05 |