• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV-Höhe optimieren

Status
Für weitere Antworten geschlossen.
M

Maenniken

Neues Mitglied
Guten Tag!

Ich würde auf meiner Homepage gerne ein Layout, das vorwiegend aus DIV-Elementen besteht einbinden. Dazu habe ich einen DIV erstellt, der das gesamte Layout einschließt, die CSS-Class heißt ".container". Er enthält die Menübar links (".menubar"), den Inhalt (".content") und die Rightbar (".rightbar"). Um meine Erklärung zu vereinfachen habe ich den Header nun weggelassen.
Denn was ich erreichen möchte ist, dass die Menubar immer bis zum untersten Rand vom Container reicht. D.h. wenn der Inhalt länger ist als die Menübar, soll die Höhe der Menübar sich anpassen.

Meine Frage: Wie kann ich das am besten lösen? Ich habe es schon vergeblich mit height/min-height: 100% in allen möglichen Variationen versucht. Mit display: table / table-row etc. klappt es leider auch nicht wirklich. Vielleicht habe ihr eine Idee...

Vielen Dank!

In meinem Beispiel unter DIV findet ihr das ganze veranschaulicht.

Hier der Code dazu:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
  <head>
    <title>DIV</title>
    <style type="text/css">
div { float: left; }
.container {
 width: 1000px;
}
.menubar {
 width: 200px;
 background-color: #FF0000;
}
.content {
 width: 600px;
 background-color: #FFFF00;
}
.rightbar {
 width: 200px;
 background-color: #00FF00;
}
    </style>
  </head>
  <body>
  <div class="container">
  <div class="menubar">
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a><br />
<a href="#">Link 4</a><br />
<a href="#">Link 5</a><br />
<a href="#">Link 6</a>
  </div>
  <div class="content">
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT
  </div>
  <div class="rightbar">
RIGHTBAR
  </div>
  </body>
</html>
 
Entweder musst du allen drei die gleiche Höhe geben, dann verlierst du aber die Flexibilität bei zusätzlichem Inhalt.
Oder du verwendest Faux Columns. Du weist also dem allumschließenden Container eine sich vertikal kachelnde Hintergrundgrafik zu, die den Querschnitt der drei Container darstellt: Faux Columns
 
Maenniken schrieb:
Ich würde auf meiner Homepage gerne ein Layout, das vorwiegend aus DIV-Elementen besteht einbinden.
Zum Vergrößern anklicken....
Ich muss dazu anmerken, dass das genauso sinnfrei ist, wie Tabellenlayout.
Mit HTML macht man gar kein Layout, das ist rein in CSS zu regeln. Ein <div> ist dazu da, mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren.

Es ist richtig, dass das <div> manchmal sehr nützlich ist, und auch eine Basis für das Layout liefert, aber nie macht man Layout ausschließlich mit <div>, das ist das selbe wie Layout mit Tabellen.

HTML benutzt man nur, um dem Inhalt seine Bedeutung zu geben (Stichwort: Semantik).

Gruß,
-Efchen
 
Also als erstes würde ich dir mal empfehlen, das ganze auf html 4.01 transitional umzustellen. Und eine neuere css version zu benutzen, dann würde das ganze so aussehen:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>div gestaltung</title>
<style type="text/css">
#container {
 width: 1000px;
float: left;
}
#menubar {
 width: 200px;
 background-color: #FF0000;
}
#content {
 width: 600px;
 background-color: #FFFF00;
}
#rightbar {
 width: 200px;
 background-color: #00FF00;
float:right;
}
</style>
</head>
<body>
<div id="container"> <div id="menubar"> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a><br /> <a href="#">Link 4</a><br /> <a href="#">Link 5</a><br /> <a href="#">Link 6</a> </div> <div id="content">
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT<br />
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT
  </div> <div id="rightbar">
RIGHTBAR
  </div> </body> </html>

aber eine genauere erklärung zu der dokumenten typ deklination findest du hier:SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei
 
derwunner schrieb:
Also als erstes würde ich dir mal empfehlen, das ganze auf html 4.01 transitional umzustellen.
Zum Vergrößern anklicken....
Warum? Was spricht gegen die Verwendung von XHTML?

Und eine neuere css version zu benutzen
Zum Vergrößern anklicken....
Es wurde keine CSS-Version angegeben, wo stellst Du das denn ein, welche CSS-Version der Browser nutzen soll?

<title>div gestaltung</title>
Zum Vergrößern anklicken....
Mit HTML gestaltet man nicht. Man gestaltet mit CSS.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben