|
[CSS] 100% DIV-Layout, Scrollen innerhalb
Hallo!
Ich hätte mal eine Frage an euch CSS und HTML-Experten. Ich arbeite gerade an einer Seite, die aus einem Bildschrimfüllenden Content bestehen soll. Diese ist ein eine linke und rechte Spalte aufgeteilt. Die rechte enthält, ähnlich wie Google Maps, ein Anzeigefeld. Die linke enthält verschiedene Controls und Texte. Jetzt habe ich folgendes Problem: Ich habe die Linke Spalte mit Höhe 100% definiert, darin befinden sich verschiedene DIVS; teilweise mit fester, teilweise mit variabler Höhe. Am Ende soll ein DIV mit Text folgen, dass die restliche Höhe einnehmen soll. Sollte der Text diese Höhe übersteigen, soll es sich nicht über das Parent-Element vergrößern, sondern innerhalb eine Scrollleiste (also overflow: auto) anzeigen. Leider funktioniert das bisher nicht. Entweder vergrößerte sich das ganze Fenster oder der restliche Text wird einfach abgeschnitten, weil die linke Spalte overflow: hidden hat und demnach den Rest ausblendet. Hat jemand von euch einen Tipp, wie das zu lösen ist? Ansonsten werde ich zu einem Tabellen-Layout zurückkehren müssen.. :) Vielen Dank! Grüße, Mo |
Re: [CSS] 100% DIV-Layout, Scrollen innerhalb
Zeig mal bitte den Code (HTML + CSS), evtl. auch Deine Testseite.
|
Re: [CSS] 100% DIV-Layout, Scrollen innerhalb
Wenn "overflow: auto" eine ScrollBar erzeugen würde, warum nutzt du dann "overflow: hidden" und beschwerst dich dann, wenn keine ScrollBar erscheint?
Oder hab ich das jetzt falsch verstanden? |
Re: [CSS] 100% DIV-Layout, Scrollen innerhalb
Hallo,
klar, sorry. Das gehört natürlich dazu :) Die Demoseite ist hier:  http://moritzmahling.de/css.htmlAus Platzgründen würde ich für CSS- und HTML-Code auf den Quelltext verweisen - hoffe, das ist ok? Ist alles in der einen Datei. Das overflow: hidden gilt für die gesamte linke Spalte. Der Scrollbalken soll nur im unteren DIV erscheinen, in dem der Blindtext angezeigt wird. |
Re: [CSS] 100% DIV-Layout, Scrollen innerhalb
Das Problem ist leider, daß man als Größe irgendwie nicht sagen kann "bis zum Rand des Parent".
Und damit der Browser weiß, ab wann er scrollen muß, muß man ihm eine "feste" Größe mitteilen. Also irgendwie so:
Code:
... wäre dann [Höhe von layout_left] - [Summe der Höhe aller anderen DIVs innerhalb von layout_left]
<html>
<head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> body,div,input,textarea,button { font-family: "Lucida Grande","Lucida Sans",Geneva,verdana,san-serif; font-size: 9pt; } #layout_left { width: 350px; height: 100%; overflow: auto; } #layout_left_text { padding: 8px; overflow: scroll; } </style> <script language="Javascript" type="text/javascript"> <!-- function myLoad() { document.getElementById('layout_left').overflow = 'hidden'; document.getElementById('layout_left_text').height = ...; } //--> </script> </head> <body onLoad="myLoad()"> |
Re: [CSS] 100% DIV-Layout, Scrollen innerhalb
Hey,
alles klar - ich vermute, dann muss ich das tatsächlich auf JS-Basis lösen, auch wenn mir das irgendwie nicht passt. Oder ich gehe doch noch zurück zur Tabelle - damit müsste das ja eigentlich auch gehen, denn Zellen sind ja automatisch durch die Höhe der Tabelle begrenzt. Danke für die Info, und falls jemandem noch was einfällt ... :mrgreen: |
Re: [CSS] 100% DIV-Layout, Scrollen innerhalb
Jupp, bei meiner Seite hab ich solche Probleme über eine Kombination aus Tabellen und DIVs "einfacher" lösen können.
Ich weiß auch nicht, was alle gegen Tabellen haben? |
Re: [CSS] 100% DIV-Layout, Scrollen innerhalb
Zitat:
http://stackoverflow.com/questions/8...layout-in-html |
Re: [CSS] 100% DIV-Layout, Scrollen innerhalb
Interessant sind auch die table-bezogenen Werte für
display, damit lässt sich eine Tabelle aus divs bauen und damit auf Tabellen verzichten. |
| Alle Zeitangaben in WEZ +1. Es ist jetzt 21:50 Uhr. |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz