1 parent Div mit fester Größe (pixel), 2 child Divs -> dynamisches Lückenfüllen

T

Thom-

Grünschnabel
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: 
<!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
 
Hallo.
#unterseDiv =
#container = 240px - #oberesDiv = 50px.
#unteresDiv = 190px - 4px border = 186px

Das war's.
 
Thom- hat gesagt.:
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)
Zum Vergrößern anklicken....

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

Oder hat CSS neuerdings Funktionen, die ein Subtrahieren von Divs erlauben? :D hab bisher noch nie was darüber gelesen.
 
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.
 
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)
Zum Vergrößern anklicken....

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

Anhänge

  • kackdivs.png
    kackdivs.png
    94,7 KB · Aufrufe: 58
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>
 
Zuletzt bearbeitet:
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)
 
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>
 
Zuletzt bearbeitet:
:D 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?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück