1 parent Div mit fester Größe (pixel), 2 child Divs -> dynamisches Lückenfüllen @ tutorials.de: Tutorials, Forum & Hilfe

Thom- · 06.12.11 17:04

Hallo Leute,

ich verzweifel noch. Ich habe ein parent Div, welches eine feste Höhe hat (sagen wir 500px)
Darin sind zwei Divs, die untereinander angezeigt werden sollen.
Das obere Div hat eine flexible Größe (keine Höhenangabe).
Das untere Div soll den restlichen Platz zur festen Höhe ausfüllen und ggf., falls es zu groß sein sollte mit overflow:auto einen schnuckeligen Scrollbalken anzeigen.

Ich habe viele Lösungen gesehen, die jedoch eine feste Höhenangabe des oberen Divs benötigen. Das kann ich nicht machen, da dieses dynamisch verändert wird (Jquery Accordion)

Das ganze funktioniert fast, jedoch überlappt das untere Div immer genau die Höhe des oberen Divs nach unten raus. Als ob das untere Div mit der Höhenangabe height=100% einfach den verbrauchten Platz ignoriert und sich nur an seinem parent orientiert (also das Geschwisterdiv im Endeffekt vergisst)

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>gnugnugas</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#container { 
	height:240px; 
}
#oberesDiv { 
	height:50px; 
	border:1px solid black; 
}
#unteresDiv { 
	border:1px solid green;
	height:100%; 
	overflow:auto; 
}
</style>
</head>
<body>
<div id="container">
	<div id="oberesDiv">texttexttext</div>
	<div id="unteresDiv">texttexttexttexttextttexttte <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla </div>
</div>
</body>
</html>

Hat irgendjemand eine Idee, wie ich dem widerspenstigen unterem Div klar machen kann, dass er den Platz seines Bruders auch berücksichtigen soll?

Gruß
-Thomas

djheke · 06.12.11 17:57

Hallo.
#unterseDiv =
#container = 240px - #oberesDiv = 50px.
#unteresDiv = 190px - 4px border = 186px

Das war's.

Thom- · 06.12.11 22:09

Zitat von Thom-

Ich habe viele Lösungen gesehen, die jedoch eine feste Höhenangabe des oberen Divs benötigen. Das kann ich nicht machen, da dieses dynamisch verändert wird (Jquery Accordion)

Ich hab also keinerlei Pixelangaben über die beiden Divs im container.

Oder hat CSS neuerdings Funktionen, die ein Subtrahieren von Divs erlauben?

hab bisher noch nie was darüber gelesen.

djheke · 06.12.11 22:19

Naja mit css3 wääääre es möglich, wenn die Browser mitspielten.

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>gnugnugas</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#container { 
    height:240px; 
}
#oberesDiv { 
    height:50px; 
    border:1px solid black; 
}
#unteresDiv { 
    border:1px solid green;
    height:100%; 
    overflow:auto; 
}
</style>
</head>
<body>
<div id="container">
    <div id="oberesDiv">texttexttext</div>
    <div id="unteresDiv">texttexttexttexttextttexttte <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla  <br /> blabla </div>
</div>
</body>
</html>

Deine Code aber, weicht von deinen Vorstellungen erheblich ab. Somit weiß ich nicht so genau was du möchtest.
Ein Live-Beispiel wäre sehr hilfreich.

para_noid · 06.12.11 23:32

Ich habe viele Lösungen gesehen, die jedoch eine feste Höhenangabe des oberen Divs benötigen. Das kann ich nicht machen, da dieses dynamisch verändert wird (Jquery Accordion)

Wenn du eh jQuery verwendest, kannst du doch auf das Zieh-Ereignis (keine Ahnung wie es heißt) reagieren, im Stile von: wenn gezogen, ermittle größe des ersten Divs, substrahiere diese von der Größe des umfassenden Divs und weise dem zweiten Div diesen Wert zu.

Ein reiner CSS-Weg fällt mir leider auch nicht ein.

Thom- · 07.12.11 09:55

Anbei mal ein Bild von dem Problem. Ich bin mit Firebug über das div mit der Id "oberesDiv" gefahren, damit Firebug den Container hervorhebt. Man sieht, dass der Parent Container die Größe behält, der "unteresDiv"-Container hingegen schiebt sich sozusagen mit den Arschbacken über den Abgrund des "container"-Divs. So wie es aussieht tut er so als ob das obere Div nicht existieren würde.

Der Code weicht von den Vorstellungen nicht ab - der enzige Unterschied: Ich habe dem oberen Div für den Test eine feste Höhe gegeben - in der Praxis wird die jedoch im laufenden Betrieb von jQuery verändert.

@para_noid ja jQuery wäre eine Option - möchte ich jedoch soweit wie möglich vermeiden, da bereits ohnehin schon viel Last von jQuery erzeugt wird. Ich versuche immer zuerst alles so gut wie möglich mit CSS zu lösen.

Ich finde es halt etwas komisch, dass dieser Standardfall in HTML und CSS nicht möglich zu sein scheint. "Hab oben eine Leiste die manchmal größer und kleiner ist und unten soll alles gefüllt werden" scheint mir so alltäglich zu sein :\

djheke · 07.12.11 15:13

Also, ich weiß nicht ob du uns veräppeln willst. Wenn du #container eine feste Höhe gibst, warum soll er sich neu anpassen ? Im Grunde weiß ich immernoch nicht, wass du möchtest.Übrigens, dein oberer Div hat auch eine feste Höhe.

Vielleicht so ?

Code :

* {
 margin: 0;
 padding: 0;
}
 
html , body {
 height:100%;
 background:#09c;
 
}
 
ul  { 
 background:#add;
 
}
 
li ul {
 background:#09c;
 min-height:100%;
}
 
 
  <ul>
   <li><p>JQuery</p>
     <ul>
      <li><p>Blindtext</p></li>
    </ul>  
   </li>
  </ul>

Thom- · 07.12.11 15:43

Veräppeln möchte ich hier niemanden - im Gegenteil ich versuche das Problem so ausführlich wie möglich zu erläutern.

Zusammenfassend:
- #container hat immer feste Größe
- #oberesDiv hat dynamische Größe
- #unteresDiv soll dynamisch den Rest bis zum Ende des #containers ausfüllen

Das Beispiel HTML hat für #oberesDiv eine feste Größe um den Code einfach und übersichtlich zu halten. In der Praxis ist #oberesDiv ein jQuery Accordion.

Fragestellung: Löse das Problem des überragenden #unteresDiv OHNE der Verwendung von festen Pixelangaben im CSS.

Visuelle Darstellung des Problems: Siehe Screenshot in meinem vorhergehenden Post - der blau durch Firebug hervorgehobene Bereich ist der #container - man kann eindeutig erkennen, dass #unteresDiv den #container überragt (genau um die Höhe des #oberenDiv)

djheke · 07.12.11 20:15

Wenn dein oberer Divl mitscrollen darf, dann sollte das hier funktionieren.

Code :

* {
 margin: 0;
 padding: 0;
}
 
html , body {
 overflow:hidden;
}
 
#container { 
 position:relative;
 background:#a33;
 height:400px;
 overflow:auto;
}
 
#oben {
 background:#09c;
 min-height:150px;
}
 
#unten  {
 background:#a33;
 color:#fff;
 min-height:251px;
 
}
 
p {
 padding:10px;
}
 
 
<div id="container">
 <div id="oben">..</div>
 <div id="unten">...</div>
</div>

Thom- · 08.12.11 08:59

eben das ist nicht gewünscht.
Das obere Div ist ein Navigationsbereich, der immer sichtbar sein muss, aber dessen Größe sich flexibel ändert.
Der untere Div ist der Inhaltsbereich der auch mal sehr lang werden kann. Wenn man das ganze mitscrollen lassen würde, müsste der User immer sehr hoch scrollen um zu Navigieren und wüsste danach auch nicht mehr wo er vorher im Inhaltsbereich war.

Woher kommen außerdem die min-height Angaben? Sind die Pixelangaben frei gewählt, oder hast du da irgendwas berechnet?

djheke · 08.12.11 09:08

Ich glaube ab hier solltest du so langsam anfangen zu überlegen.Beispiel:
Deine gesamte Konstruktion hat eine Höhe von 400 Pixel. Im ungünstigsten Fall ist deine Navi inkl. Jqery auch 400 Pixel hoch. Wie soll man dann an den Inhalt kommen ? Leg deine Navi einfach darüber unten drunter dein Jqery und den Inhalt.

Thom- · 08.12.11 09:22

Nur um mal zu sehen wie es in der Praxis aussieht, hänge ich mal einen Screenshot von der ganzen Seite an.

Links oben ist das obere Div, in welchem ein jQuery Accordion erzeugt wird. Der User kann das Ding einklappen und ausklappen wie er will. Wichtig ist nur, dass er das immer sieht um ggf. etwas an seiner Karte anzupassen.
Das Accordion verändert also seine Größe im Betrieb häufig, da der User ja die einzelnen Punkte ein- und ausklappen kann.

Links unten ist das #untereDiv, welches dynamisch die einzelnen Punkte der Karte auf der rechten Seite ausspuckt. Der Benutzer kann dann herunterscrollen um sich einen Punkt für die nähere Betrachtung auszuwählen. Mal angenommen er würde wieder etwas ändern wollen an der Karte (zusätzliche Informationen einblenden) so müsste er wieder ewig scrollen.

Wie man sieht habe ich es eigentlich bereits wie ich es wollte, jedoch ist es mit Javascript realisiert (event Handles auf Resize des Windows, Veränderung am Accordion und Veränderung an den sichtbaren Punkten auf der Karte).

Ich hätte das ganze dennoch am liebsten mit reinem CSS gelöst, da es mir m.E. etwas zu viele Handles und Berechnungen sind, nur um den unteren linken Div bis zum unteren Bildschirmrand auszufüllen.

Ich will halt nicht einer der Entwickler werden, die aus Faulheit sagen "Hajo machmers halt mit Javascript" und dann nach einigen Wochen Entwicklungszeit eine unglaublich träge Website vorliegen haben. Ich versuche also so viele Berechnungen in Javascript wie möglich wegzulassen, deshalb die Fragestellung hier.
Natürlich kann es auch sein, dass man dieses Problem nicht anders lösen kann, aber mir erschien es eigentlich so alltäglich, dass ich es nicht glauben konnte als ich es nicht hinbekommen habe.

Google Maps sieht übrigens auch so ähnlich aus, aber soweit ich das sehe haben die auch feste (mit Javascript berechnete) Height Angaben in ihrem Code.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Tabelle füllen nach parent/child oder child/child beziehung?

Parent beschneidet Child

Parent - Child bei Linien?

mdi Kommunikation parent-child

parent und child objekte

E-Mail:

Abonnieren Abbestellen