Höhe von <div> immer maximal

A

AmShaegar

0
Hallo,

ich versuchte mich grad an einem neuen Layout, das auf Div.Layern basiert. Leider sind wiedermal unerwartete Probleme aufgetreten. Im Prinzip habe ich Folgendes:
Code: 
...
<div id="body">
  <div id="header">
    Header
  </div>
  <div id="menu">
    Einige Links. Im Beispiel Verweis auf style.css.
  </div>
  <div id="content">
    Jede Menge Text, der aufgrund von PHP eine variable Länge hat.
  </div>
  <div id="footer">
    Copyright
  </div>
</div>
...
Nun kann #content relativ lang werden, weil ein Blog eingebaut wird. Frage ist jetzt, wie ich es hinbekomme, dass #menu immer genauso hoch ist wie #content.
Kompletter Code: http://www.magicalmoments.de/amshaegar/habo.html

Dem div Folgendes zu verpassen hat alles nichts bewirkt:
Code: 
height: 100%;
height: auto;
bottom: 0; und padding-bottom: auto;
etc.
Ich hoffe, ihr könnt helfen.

MfG AmShaegar
 
Höhenangaben auf Blockelemente funktionieren nur, wenn schon HTML und BODY eine feste Höhe (100%) zugewiesen bekommen haben und die Child-Elemente müssen dann, wenn ich mich nicht irre, position:relative; dazu sein (zumindestens sind sie das bei mir)

Den Trick hab ich von Xeno - damit schaffst du es dann auch, eine Copyright-Leiste immer am unteren Bildrand zu haben (bzw. wenn der Inhalt größer ist dann da noch darunter....)

Xeno's Seite ist leider gerade bisschen offline, aber bei mir kannst du gerne mal rein schauen:

Seite: http://www.cs-bergann.de/
CSS: http://www.cs-bergann.de/style.css (nicht wundern - die ist noch so alles hintereinander weg geschrieben zwecks xeno's 32k-Wettbewerb....)

wenn du dann also 2 DIV-Container nebeneinander hast, die beide wie mein #main eine min-height von 100% haben, sollte das so aussehen, wie du dir das vorstellst.

Allerdings nur im Firefox, Opera und anderen Browsern, die CSS richtig interpretieren...
InternetExplorer (zumindestens bis Version 6) kann mit min-height nichts anfangen.

und eine feste height wäre wiederum im InternetExplorer wahrscheinlich ziel-bringend, für Firefox und co. würde es aber wieder alles kaputt machen...
kannst ja gegebenenfalls ein wenig mit CSS-Hacks arbeiten, um dem InternetExplorer andere Anweisungen zu geben als den restlichen Browsern....
 
Ersteinmal vielen Dank für die Bemühungen. Leider waren sie nicht zielführend. Ich habe keine Veränderung erreichen können.
Original von beavisbee
Höhenangaben auf Blockelemente funktionieren nur, wenn schon HTML und BODY eine feste Höhe (100%) zugewiesen bekommen haben
Zum Vergrößern anklicken....
Warum? :D
Original von beavisbee
und die Child-Elemente müssen dann, wenn ich mich nicht irre, position:relative; dazu sein (zumindestens sind sie das bei mir)
Zum Vergrößern anklicken....
Sind bei mir auch alle. Allein schon, wegen ihrer Positionierung(nur in #body musste ich das ergänzen).
Original von beavisbee
Den Trick hab ich von Xeno - damit schaffst du es dann auch, eine Copyright-Leiste immer am unteren Bildrand zu haben (bzw. wenn der Inhalt größer ist dann da noch darunter....)
Zum Vergrößern anklicken....
Das ist zwar nützlich, leider aber nicht das, was ich erreichen will. Der #footer soll schon direkt am Inhalt dran kleben, das ist so gewollt.
Original von beavisbee
Xeno's Seite ist leider gerade bisschen offline, aber bei mir kannst du gerne mal rein schauen:
[...]
wenn du dann also 2 DIV-Container nebeneinander hast, die beide wie mein #main eine min-height von 100% haben, sollte das so aussehen, wie du dir das vorstellst.
Zum Vergrößern anklicken....
Leider nicht. Es verändert sich zwar je nach Angaben geringfügig etwas. Zum Beispiel wird der #body 100% groß, wenn ich min-height: 100%; setze, aber an dem roten #menu hat sich rein gar nichts verändert, tut mir Leid.

MfG AmShaegar
 
Original von AmShaegar
Original von beavisbee
Höhenangaben auf Blockelemente funktionieren nur, wenn schon HTML und BODY eine feste Höhe (100%) zugewiesen bekommen haben
Zum Vergrößern anklicken....
Warum? :D
Zum Vergrößern anklicken....

Weil vorher keine Höhe angegeben ist (das ist nunmal so) und sich die folgenden Elemente immer an ihren Elternelementen orientieren. Wenn ich dir sage "Geh mal bis zur Grenze Frankreichs", die Grenze zwischen Deutschland und Frankreich aber gar nicht festgelegt ist, was würdest du dann machen?


Original von AmShaegar
Hallo,

ich versuchte mich grad an einem neuen Layout, das auf Div.Layern basiert. Leider sind wiedermal unerwartete Probleme aufgetreten. Im Prinzip habe ich Folgendes:

(...)

Nun kann #content relativ lang werden, weil ein Blog eingebaut wird. Frage ist jetzt, wie ich es hinbekomme, dass #menu immer genauso hoch ist wie #content.
Zum Vergrößern anklicken....

Das ist mit CSS nicht möglich. Zumindest noch nicht. Eine Möglichkeit, zumindest optisch einen ähnlichen Effekt zu erreichen, stellen die Faux Columns dar. Das ist aber imho eine schlechte Lösung und ich empfehle dir, das ganze mit Javascript zu lösen. Wer Javascript deaktiviert hat, kommt dann nicht in den Genuss des schöneren Layouts, aber so ist das nunmal.
 
Na ja, ob jetzt Faux Columns oder Javascript für dieses Problem schöner ist, ist meiner Meinung nach Geschmackssache. Ich finde die Faux Columns schöner ;).

Ich hab mal ein bisschen rumgebastelt, und das ist dabei herausgekommen:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


  <title>AmShaegar</title>
  <link rel="stylesheet" href="habo-Dateien/style.css" type="text/css">
</head><body>
  <div id="body">
    <div id="header">
      <h1>Header</h1>
    </div>
    <div id="container">
      <div id="menu">
        <a href="http://www.magicalmoments.de/amshaegar/style.css">style.css</a><br>
      </div>
      <div id="content">
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in
Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt
sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in
dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der
allmächtigen Interpunktion werden die Blindtexte beherrscht - ein
geradezu unorthographisches Leben. Eines Tages aber beschloß eine
kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in
die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort
wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen
Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte
seine sieben Versalien, schob sich sein Initial in den Gürtel und
machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges
erklommen hatte, warf es einen letzten Blick zurück auf die Skyline
seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und
die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm
eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.
Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo
sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von
ihrem Ursprung noch übrig wäre, sei das Wort “und” und das
Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land
zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so
dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter
auflauerten, es mit Longe und Parole betrunken machten und es dann in
ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder
mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie
es immernoch. </div>
      <br style="clear: both;">
    </div>
    <div id="footer">
      Copyright: AmShaegar
    </div>
  </div>
</body></html>
Code: 
body {
  margin: 0;
  background-color: white;
}
h3 {
  font-family: Trebuchet MS;
  color: #000000;
}
#body {
  width: 1000px;
  font-family: Trebuchet MS;
  font-size: 16px;
  background-color: black;
}
#header {
  line-height: 1;
  background-color: green;
}
#container {
  background-color: red;
  position: relative;
  left: 60px;
  width: 940px;
}
#menu {
  font-family: Trebuchet MS;
  font-size: 14px;
  width: 170px;
  padding: 0 20px 0 50px;
  float: left;
}
a {
  color: #800203;
  text-decoration: none;
}
#content {
  width: 600px;
  height: auto;
  padding: 0 65px 35px 35px;
  float: left;
  background-color: yellow;
}
#footer {
  text-align: right;
  background-color: white;
  font-family: Trebuchet MS;
  font-size: 12px;
  border-top: solid 1px #800203;
  margin-right: 50px;
  margin-bottom: 30px;
  margin-left: 60px;
  background-color: blue;
}

Ich finde, das einzige was daran hässlich ist, ist das "<br style="clear: both;">" im HTML-Code. Aber wenn man nicht ganz extrem auf die Trennung von Content und Style pocht, kann man das sicherlich akzeptieren.
 
Also, das mit den Faux Colums habe ich beim ersten durchlesen noch nicht ganz verstanden, scheint mir aber auch nicht ganz das zu sein, was ich suche. Ich will das nicht mit irgendwelchen Grafiken umgehen. Javascript sagte mir schon eher zu, weil ich da ein wenig bewanderter drin bin, allerdings wollte auch das nicht auf Anhieb klappen, da ich dem kürzeren Div scheinbar nicht die Höhe des längeren Divs zuweisen konnte, wenn diese variabel und nicht fest ist. Allerdings habe ich nun durch Zufall und ein ganz anderes Problem die Lösung, die mir am besten gefällt gefunden:
Da ich davon ausgehen kann, dass #content immer größer als #menu ist habe ich ihn einfach in den #menu hineingepackt und somit die Höhe von #menu erzwungen. Auch nicht die eleganteste Lösung, weil ich eigentlich strikt zwischen content und menu trennen wollte, aber wenn's nur so geht, dann soll's eben so sein.
Ich danke trotzdem allen für die Hilfe und besonders für die Information, dass es gar nicht auf einfachem Wege möglich ist mit CSS. Ich hatte schon gedacht ich wär zu blöd.

Man liest sich,
AmShaegar
 
ansonsten kannst du doch auch das Menü-Div in das Content-Div rein hauen und dann dem Menü-Div height:100%; geben und position:relative; - sollte evtl. gehen....

JavaScript würde ich persönlich nur als letzte Hilfslösung ansehen....
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben