Hoehe von Div1 auslesen und Div2 anpassen?

[Suchfunktion]

Probleme mit overflow..

Hallo!

Ich bin dabei, eine Webseite zurecht zu basteln.
Den Seitenaufbau seht Ihr im Anhang.

Gruen = Tabelle (Jeder DIV-Bereich ist in einer eigenen Zelle.)
Blau = Menue (DIV-Class: "vmenu")
Rot = Contentbereich (DIV-Class: "content")
Grau = Header & Footer (DIV-Class: "header" und "footer")

Jetzt zum Problem:
Ist das Menue groesser als der blaue DIV-Bereich,
dann soll sich dieser Vergroessern und der rote Contentbereich soll sich der Groesse anpassen.
Ist der Inhalt im Contenbereich groesser als der dazugehoerige DIV-Bereich (Blau),
dann soll ein Scrollbalken (per overflow) im blauen DIV-Bereich eingeblendet werden.

Kurzum:
Rot und Blau sollen sich dem Inhalt von Rot hoehenmaessig IMMER anpassen.
Rot und Blau duerfen sich dem Inhalt von Blau hoehenmaessig NIE anpassen!
(Blau soll einen Scrollbalken erhalten, wenn der Inhalt groesser ist als die DIV-Bereiche.)
Grau soll immer gleich hoch bleiben.

Ich hoffe ich habe das halbwegs verstaendlich erklaert.
Falls nicht, dann sagt bescheid und ich versuche es erneut.

Vielen Dank

 

[Maik]

Rot und Blau sollen sich dem Inhalt von Rot hoehenmaessig IMMER anpassen.
Rot und Blau duerfen sich dem Inhalt von Blau hoehenmaessig NIE anpassen!

Diese beiden Fallunterscheidungen bzw. Regeln lassen sich nicht umsetzen, zumindest nicht mit CSS.

Entweder wachsen die DIVs bei zunehmenden Inhalt, oder sie behalten ihre vordefinierte Größe und blenden bei übergroßem Inhalt einen Scrollbalken ein.

 

[Suchfunktion]

Hallo!

Ich habe ein (fuer mmich persoenlich) kurzzeitig nicht wirklich gut loesbares problem,
und zwar habe ich zwei Divbereich nebeneinander.
(Div1 und Div2)

Ich weiss auch schon, dass ich per offsetHeight die Groesse von Div1 herausbekommen kann, aber wie kann ich dann Div2 die selbige Höhe geben
`
Also Div2 soll immer so hoch sein wie Div1.
Sollte Div2 allerdings hoeher sein als Div1, dann soll Div2 trotzdem so hoch sein wie Div1, allerdings mit Scrollbalken. (Das mache ich denke ich mit css und overflow.)

Die Frage ist jetzt nur,
wie genau ich das mit der Hoehen-Anpassung von Div2 mache, also wie uebergebe ich Div2 einen Hoehenwert?

Ich weiss leider nicht, wonach genau ich suchen muss, da ich mich mit JavaScript ueberhaupt nicht auskenne.

Ein paar Hilfestellungen waeren super!
(Ich verlange ja nicht, dass ihr mir das zusammenbastelt.. Ich brauche nur eure Unterstuetzung.)

Danke fuer eure Hilfe!


[editpost by mod] Die beiden Threads mit der gleichen Fragestellung wurden zusammengeführt.

 

[sadi]

Hallo,
am besten Du verwendest JavaScript dafür. Die Funktion offsetHeight ist schon richtig. Damit kannst die Hoehe des ersten Divs herausbekommen. Um nun die Hoehe des zweiten Divs anzupassen musst Du folgendes machen. Erstelle die Divs wie gewünscht in deinem Body. Nach dem zweiten Div sollte dann folgender JavaScript-Code eingefügt werden.

<script type="text/javascript">
document.getElementById('das zweite div ID').style.height = document.getElementById('das erste div ID').offsetHeight+"px";
</script>

Wichtig ist dabei, dass du die Divs mit IDs versiehst. Diese IDs werden dann in die dazugehörigen Klammern eingetragen. Das +"px" wird benötigt, um Standardkonform zu bleiben.

Gruß

Sascha

 

[Suchfunktion]

Hi! Vielen Dank erstmal!

Wo rufe ich das am besten auf?

Im Header?
Vor/hinter den Div-Bereichen?

Und wie sieht es mit CSS aus?
Ich moechte ja mit overflow (also falls der Inhalt groesser ist als der Div2-Bereich) einen Scrollbalken einblenden lassen. Dazu muss ich aber per CSS eine feste Größe vorgeben.
Was wird dann verwendet?

Der JavaScript-Einstellung oder die CSS-Werte?

 

[Suchfunktion]

Aloah!

Ich habe mich mal in Sachen JS-Scripten versucht, aber bin gnadenlos gescheitert

	<script language="JavaScript" type="text/JavaScript">
	<!--
	function ContentHeight(){
	  var a, b, c;
	  a=document.getElementById('vmenu').offsetHeight;
	  b=120;
	  c=(a+b);
	  document.getElementById('content_div').offsetHeight=c+"px";
	}
	//-->
	</script>

Soweit mein Code.
(Div2, bzw. "content_div" muss immer 120px hoeher, bzw. tiefer sein als der andere Divbereich.)

Die Divs sehen wie folgt aus:

<div id="vmenu">..</div>
<div id="content_div">..</div>

Dazu muss ich sagen, dass ich in css zusaetzlich noch Formatierungen verwende:

DIV.vmenu{
	width: 266px;
	vertical-align: top;
}

DIV.content_div{
	width: 402px;
	vertical-align: top;
	min-height: 330px;
	overflow: auto;
}

Aber Div2 baut sich immernoch komplett auf, also kein Scrollbalken
Und die Hoehe passt sich der von Div1 (bzw. "vmenu") auch nicht an.

Also ist alles wie bisher, egal ob mit oder ohne dem JavaScript.

 

[sadi]

...
Grundsätzlich solltest du dieses JavaScript im Body-Bereich einfügen, nach den beiden Divs.
Die Zuweisung der neuen Div-Hoehe solltest du per document.getElementById('...').style.height = ...; zuweisen, da Du dadurch die Styleangaben per JavaScript überschreiben kannst. Außerdem entferne mal die Function-Deklaration und führe einfach nur den Code aus.

Gruß

Sascha

 

[Maik]

DIV.vmenu{
	width: 266px;
	vertical-align: top;
}

DIV.content_div{
	width: 402px;
	vertical-align: top;
	min-height: 330px;
	overflow: auto;
}

Aber Div2 baut sich immernoch komplett auf, also kein Scrollbalken

Um den (vertikalen) Scrollbalken bei übergroßen Inhalt einzublenden, ist eine feste Höhenangabe erforderlich.

Der IE unterstützt die CSS-Eigenschaft min-height nicht

 

[Suchfunktion]

Um den (vertikalen) Scrollbalken bei übergroßen Inhalt einzublenden, ist eine feste Höhenangabe erforderlich.

d.h. es wird nicht so funktionieren, wie ich das benoetige,
da ich die groesse erst berechnen lasse?

Der IE unterstützt die CSS-Eigenschaft min-height nicht

Jop, ich weiss, ich dachte ich haette es schon geloscht