[CSS] 100% DIV-Layout, Scrollen innerhalb

**moritz**

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

**Die Muhkuh**

Zeig mal bitte den Code (HTML + CSS), evtl. auch Deine Testseite.

**himitsu**

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?

**moritz**

Hallo,

klar, sorry. Das gehört natürlich dazu

Die Demoseite ist hier:

http://moritzmahling.de/css.html

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

**himitsu**

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:

markieren

Code:

			<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()">

... wäre dann [Höhe von layout_left] - [Summe der Höhe aller anderen DIVs innerhalb von layout_left]

**moritz**

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

**himitsu**

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?

**Meflin**

Zitat von himitsu:

Ich weiß auch nicht, was alle gegen Tabellen haben?

Semantic Web und so...

http://stackoverflow.com/questions/8...layout-in-html

**BUG**

Interessant sind auch die table-bezogenen Werte für

display, damit lässt sich eine Tabelle aus divs bauen und damit auf Tabellen verzichten.

[CSS] 100% DIV-Layout, Scrollen innerhalb

[CSS] 100% DIV-Layout, Scrollen innerhalb

Re: [CSS] 100% DIV-Layout, Scrollen innerhalb

Re: [CSS] 100% DIV-Layout, Scrollen innerhalb

Re: [CSS] 100% DIV-Layout, Scrollen innerhalb

Re: [CSS] 100% DIV-Layout, Scrollen innerhalb

Re: [CSS] 100% DIV-Layout, Scrollen innerhalb

Re: [CSS] 100% DIV-Layout, Scrollen innerhalb

Re: [CSS] 100% DIV-Layout, Scrollen innerhalb

Re: [CSS] 100% DIV-Layout, Scrollen innerhalb

Forumregeln

Die Muhkuh Registriert seit: 21. Aug 2003 7.332 Beiträge Delphi 2009 Professional	#2 Re: [CSS] 100% DIV-Layout, Scrollen innerhalb 28. Mär 2010, 12:29 Zeig mal bitte den Code (HTML + CSS), evtl. auch Deine Testseite. Manuel Blog reactivated
	Zitat

himitsu Registriert seit: 11. Okt 2003 Ort: Elbflorenz 43.166 Beiträge Delphi 12 Athens	#7 Re: [CSS] 100% DIV-Layout, Scrollen innerhalb 28. Mär 2010, 13:39 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? Garbage Collector ... Delphianer erzeugen keinen Müll, also brauchen sie auch keinen Müllsucher. my Delphi wish list : BugReports/FeatureRequests
	Zitat

Meflin Registriert seit: 21. Aug 2003 4.856 Beiträge	#8 Re: [CSS] 100% DIV-Layout, Scrollen innerhalb 28. Mär 2010, 13:41 Zitat von himitsu: Ich weiß auch nicht, was alle gegen Tabellen haben? Semantic Web und so... http://stackoverflow.com/questions/8...layout-in-html Leo S. https://github.com/leoschweizer
	Zitat

BUG Registriert seit: 4. Dez 2003 Ort: Cottbus 2.094 Beiträge	#9 Re: [CSS] 100% DIV-Layout, Scrollen innerhalb 28. Mär 2010, 13:46 Interessant sind auch die table-bezogenen Werte für display, damit lässt sich eine Tabelle aus divs bauen und damit auf Tabellen verzichten. Intellekt ist das Verstehen von Wissen. Verstehen ist der wahre Pfad zu Einsicht. Einsicht ist der Schlüssel zu allem.
	Zitat