4 divs mit gleicher Höhe

wapplegraph · 17.04.07

Hallo

Ich habe fünf divs, und möchte, dass alle die gleiche Höhe haben. Die Höhe variert!

Also ich möchte, dass alle die Höhe vom div inhalt1 haben.

Wie kann man dies lösen?

Code:

<div id="middle">
		<div id="border1"></div>
		<div id="inhalt1">
			<div id="iinhalt1"></div>
		</div>
		<div id="border2"></div>
		<div id="inhalt2"></div>
		<div id="border3"></div>
	</div>

http://www.projekt07.sunel.ch
Besten Dank wapplegraph

m00gy · 17.04.07

Nur mal so zum Verständnis:

Threadtitel: "4 divs mit gleicher Höhe"
Erster Satz: "Ich habe fünf divs, und möchte, dass alle die gleiche Höhe haben."

Erster Satz: "Ich habe fünf divs, und möchte, dass alle die gleiche Höhe haben."
Zweiter Satz: "Die Höhe variiert!"

Hä?

Ansonsten: Meinst Du vielleicht die Ebenen, auf der die DIVs liegen? Mit "z-index" oder wie?

wapplegraph · 17.04.07

Ja, ich habe gemerkt, dass es fünf divs sind und ich konnte den Titel nicht mehr ändern.

Ist dies relevant?

m00gy · 17.04.07

Ich versteh einfach nicht so genau, was Du eigentlich willst...

wapplegraph · 17.04.07

Ich möchte, dass sich meine divs der Höhe vom div inhalt1 anpassen.

wapplegraph

Skeeve · 17.04.07

Das geht, denke ich, nur mit
a) Fest eingestellter Höhe (trivial)
oder
b) JavaScript

wapplegraph · 17.04.07

Ok.

Also mit fester Höhe geht nicht.

Wie funktioniert dies dann mir Javascript?

Also ich kann eigentlich kein Javascript. Kann PHP und habe mir schon ein Tutorial über Javascript angeschaut. Habe Javascript jedoch noch nie richtig benutzt.

Hilarious · 17.04.07

Faux Columns

wapplegraph · 17.04.07

Ja

Aber ich habe schon Hintergrundbilder.

wapplegraph

Bief · 17.04.07

Vielleicht funktioniert ja...
a) height:inherit
b)height:100% (so wie bei Tabellen die Breite)

Falls nicht:

Code:

<head>
<script>
function setDIV() {
document.getElementById('inhalt2').height = document.getElementById('inhalt1').height;
//Und so mit allen divs und ihren IDs
}
</script>
</head> 
<body onLoad="setDIV()">
...
</body>

Müsste gehen, oder?

wapplegraph · 17.04.07

Hallo

Danke für den Code.

Er klappt jedoch nicht und muss inhalt1 (also dieses Element, wo ich die Höhe nehme) rechts oder links beim Gleich stehen? Habe beides ausprobiert.

wapplegraph

Bief · 17.04.07

Das was du verändern willst, steht immer links. Also stimmt das in dem Fall...

Schau es dir mal mit Firefox an und öffne die Fehlerkonsole (Extras -> Fehlerkonsole)
Aber ich glaube du musst style.height anstatt nur height schreiben...

Falls es dann immer noch nicht geht, dann probiers mal manuell aus, ob es dann funktioniert...

wapplegraph · 17.04.07

Es klappt noch nicht.

Code:

<script>
		function setDIV() 
		{
		document.getElementById('border1').style.height = document.getElementById('inhalt1').style.height;
		document.getElementById('border2').style.height = document.getElementById('inhalt1').style.height;
		document.getElementById('inhalt2').style.height = document.getElementById('inhalt1').style.height;
		document.getElementById('border3').style.height = document.getElementById('inhalt1').style.height;
		}
</script>

</head>

<body>

<script>
	OnLoad="setDIV()"
</script>

Wie meinst du es manuel? Das checke ich nicht.

Besten Dank Jonas

HoverSK · 17.04.07

vlt hab ich nicht verstanden was du willst aber warum packst du nicht um deine divs welche die gleiche höhe haben sollen noch ein div drumherum das hat dann die höhe des höchsten Elementes

Sorry falls ich an deiner Anforderung vorbeirede.

MfG
HoverSK

wapplegraph · 17.04.07

HoverSK schrieb:
vlt hab ich nicht verstanden was du willst aber warum packst du nicht um deine divs welche die gleiche höhe haben sollen noch ein div drumherum das hat dann die höhe des höchsten Elementes

Sorry falls ich an deiner Anforderung vorbeirede.

MfG
HoverSK

Ja ich glaube dies wäre eine Lösung, ich habe jedoch keine Erfahrung mit Kinder- und Elternelementen.

Also alle müssten dann die Höhe vom div#middle haben.

Code:

<div id="middle">
		<div id="border1"></div>
		<div id="inhalt1">
			<div id="iinhalt1">
			
			</div>
		</div>
		<div id="border2"></div>
		<div id="inhalt2">
					</div>

wapplegraph

HoverSK · 18.04.07

nein sie haben immer noch ihre eigene Höhe nur <div id="middle"> hat dann die höhe des höhsten Elementes welches sich in ihm befindet also die Lösung falls es dir um nen Rahmen oder Sowas geht bzw du etwas drunter machen möchtest.

bei solchen Fragen empfehle ich dir http://de.selfhtml.org/
für alles HTML betreffende
und
http://www.css4you.de/
für alles was mit CSS also Design und Anordnung zu tun hat dort findest du viele Beispiele mir haben diese Seiten bis her immer gereicht um eine Lösung zu finden.

MfG
HoverSK

wapplegraph · 18.04.07

Aha

Nee also das bringt mir leider nichts. DAnn muss ich es wohl mit JavaScript lösen.

Nun eine Frage:

Stimmt der Befehl document.getElemetById('').style.height? weil wenn ich dies in eine Variable schreiben lasse und diese ausgeben möchte so kommt ein Fehler und es steht: undefined.

Könnte mir jemand bei der JavaScript Lösung helfen?

Bief · 18.04.07

wapplegraph schrieb:
Aha

Nee also das bringt mir leider nichts. DAnn muss ich es wohl mit JavaScript lösen.

Nun eine Frage:

Stimmt der Befehl document.getElemetById('').style.height? weil wenn ich dies in eine Variable schreiben lasse und diese ausgeben möchte so kommt ein Fehler und es steht: undefined.

Könnte mir jemand bei der JavaScript Lösung helfen?

Du kannst grundsätzlich nur Strings (Zeichenketten) und (bei JavaScript) Zahlen anzeigen lassen. Hier bei handelt es sich jedoch um ein Objekt!

Außerdem, musst du in deiner HTML-Datei folgendes schreiben:

Code:

<body onload="setDIV();">

Mir manuell habe ich gemeint:

Code:

<div style="height:200px" id="inhalt1"></div>
...

wapplegraph · 18.04.07

Also irgendwie klappt es noch nicht.

Das manuell geht nicht, also ist in meinem Fall nicht zu gebrauchen

wapplegraph

ma.buso · 18.04.07

Du kannst nicht erzwingen, dass benachbarte divs die gleiche Höhe haben.

Schreib lieber auf, was du für ein Ergebnis erzielst, dann kann man dir auch helfen.

4 divs mit gleicher Höhe

Normande

m00gy

Gast

Normande

m00gy

Gast

Normande

Pomme d'or

Normande

Gelbe Schleswiger Reinette

Normande

Weigelts Zinszahler (Rotfranch)

Normande

Weigelts Zinszahler (Rotfranch)

Normande

Tydemans Early Worcester

Normande

Tydemans Early Worcester

Normande

Weigelts Zinszahler (Rotfranch)

Normande

Châtaigne du Léman

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)