✔ div stretching

I

iam_peter

Grünschnabel
hallo,

also ich habe folgendes problem:

ein main div (wrapper) enthält zwei andere div's.
jetzt würde ich gerne das, wenn der unter div eins den main div vergrößert, durch content (<br>), dann soll sich die größe von zweiten div anpassen.

beispiel:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title>CSS-Layout mit 100%-Höhe (Header + TopNavi + Footer)</title>

<style type="text/css">
<!--

#wrapper{
	width:200px;
	background-color:#0f0;
}

.content1{
	background-color:#00f;
	margin:5px;
}

.content2{
	background-color:#f00;
	height:auto;
	min-height:100%;
	margin:5px;
}

-->
</style>

</head>
<body>

<div id="wrapper">
	<div class="content1" style="float:left;">hello<br><br><br><br><br><br></div>
	<div class="content2" style="float:right;">hello</div>
	<div style="clear:both;"></div>
</div>

</body>
</html>

also im beispiel sollter der rote kasten genauso hoch sein wie der blaue.

height:100%; hilft hier nicht?

gruß
peter
 
Hi,

hast du dir dieses Beispiel, das aus meinem Tutorial CSS-Layout mit 100%-Höhe stammt, und vom Original nur noch wenige Fragmente besitzt, nicht näher genauer angeschaut bzw. das Stylesheet studiert?

In allen vier enthaltenden Varianten besitzen nämlich die drei Spaltenblöcke (#leftCol, #centerCol, #rightCol) "optisch" die gleiche Höhe im Viewport, da ihre Spaltenhintergründe durch ein vertikal wiederholendes Hintergrundbild im DIV #wrapper ezeugt werden.

Falls dir die von mir angewendete "Fauxcolumns-Technik" nicht zusagt, kannst du über den Artikel AnyColumnLongest weitere Lösungsansätze kennenlernen, die solche "Equal-Height-Columns" erzeugen.

mfg Maik
 
danke erstmal für die antwort.
die technik hab ich glaub ich verstanden, aber ich kann sie meiner meinung nach nicht auf mein problem anwenden. bei den anderen bin ich noch nicht so richtig durchgestiegen.

also hier mal das layout (siehe anhang) und nochmal das problem im detail

wie man am layout sieht kann ich den trick mit dem background image nicht verwenden, sonst würden die freiräume zwischen den contentboxen verschwinden.

ich will das sie sowohl left und right an den midd div anpassen (und umgekehrt) als auch die letzte contentBox (bzw die midd contenBox) sich an die länge des jeweiligen vaters anpasst.

grüße
peter
 

Anhänge

  • layout.jpg
    layout.jpg
    16,3 KB · Aufrufe: 27
vielleicht hast du ja einen anderen vorschlag für den aufbau des layout (siehe anhang). ich hab die div's programmiert wie in der grafik zusehen.

gruß
peter
 

Anhänge

  • footer.jpg
    footer.jpg
    12,2 KB · Aufrufe: 25
Und wo ist da jetzt der sonderliche Unterschied zu meinen Tutorial-Templates, als dass hier nicht mit einem Hintergrundbild im Elternelement der Eindruck erweckt werden könnte, dass die drei Spalten sich gleichermaßen vom Header bis zum Footer erstrecken?

Die horizontalen (grünen) Unterteilungen lassen sich wiederum problemlos in den einzelnen "Content-Boxen" erzeugen.

Und nochmal die Bitte an dich, unsere Netiquette Nr.15 hinsichtlich der erwünschten Groß- und Klenschreibung zu beachten.

Unser Forum ist kein Chatroom. Kurz-Beiträge ("Ein-Zeilen Postings"), die einfach so ins Forum "geklatscht" werden, werden ohne Vorwarnung von einem Moderator oder Administrator gelöscht. Das gleiche gilt insbesondere für Beiträge, die in Rechtschreibung, Satzbau und Verständlichkeit nicht ein vernünftiges, allgemein übliches und altersgruppen-übergreifendes Niveau erfüllen. Jugendsprache, regional verbreitete Dialekte und durchgehend kleingeschriebene Beiträge sind ebenfalls unerwünscht. Mit anderen Worten: wer erfolgreich die im Deutsch-Unterricht erlernten Kenntnisse praxisnah auf unserem Forum anwenden kann, wird nicht mit dieser Regel in Konflikt kommen. "Wiederholungstäter" werden, nachdem sie zuvor von einem Moderator auf die Mängel hingewiesen wurden, ggf. unbefristet gesperrt.
Zum Vergrößern anklicken....

mfg Maik
 
Der Unterschied liegt darin, dass zwischen den contenBoxen noch der schwarze Strich ist der vom Hintergrund kommt. Diesen kann ich ja nicht erzeugen, wenn ich durch ein Image die weißen Flächen wiederhole.
 
Und wenn der horizontale schwarze Strich zwischen den Boxen überhaupt nicht vom Dokumentkörper, sondern von ihnen selbst stammt?

mfg Maik
 
Ich hab hier nicht mehr jeden dieser Fälle mit seinem speziellen Modellansatz vor'm geistigen Auge, da sie schon über zwei Jahre zurückliegen (müsste später mal nachschauen, was danach noch alles angefallen ist :-)), aber in jedem hab ich ein browserkompatibel funktionstüchtiges Lösungsbeispiel entwickelt, und es im Verlauf des Themas als Attachment (HTML+CSS+Grafik/en) dem Benutzer zur Verfügung gestellt.

  1. Automatische Größenanpassung von DIV
  2. IE Height 100%
  3. div container gleiche größe?
  4. Design schlicht
  5. height:100%
  6. 3 Spalten Layout mit Variablen Bereichen
  7. div height=100% nur im IE?
  8. div height=100% nur im IE?
  9. Höhe von Divs - Problem
  10. Kleine Fehler IE-Firefox
  11. Anfängerfragen
  12. Layout ohne Tabelle möglich?
  13. Content Div nach unten automatisch vergrößern
Da gibt's für dich dann erstmal viel zu lesen, zu gucken, ja vielleicht sogar zum Staunen, was sich da so alles bewerkstelligen lässt - drei Leckerlies hab ich mal dezent hervorgehoben :-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück