[HTML/CSS] Menü/Content automatisch verlängern ** erledigt ***

[strolch00]

Hi @ all,

So mein Problem besteht mal in einer eigentlich supersimplen Designumsetzung.

hier ist die Umsetzung

Wie Ihr sehen könnt verlängert sich das menü nicht automatisch bis zu footer, wenn der Contentbereich kleiner ist.
Andersherum hab ich das selbe Problem: wenn das Menü länger ist, ist der Contentbereich so klein wie der Text Platz braucht.

Ich habe schon alles versucht was mir und einem Bekannten eingefallen ist, aber nichts bringt den gewünschten Effekt.

Das HTML und die CSS sind valied.

Vielen Danke schonmal für die Hilfe

 

[burnred]

Ohne Tabellen zu verwenden fällt mir nur eine Variante mit Javascript, verknüpft mit dem onload Event ein.

Prüfen welcher ob der linke oder rechte Bereich höher ist und je nachdem die Höhe für den kleineren übernehmen.
Hier mal für die Variante Links ist höher als Rechts

function resize()
{
    var h = document.getElementById('links').offsetHeight;
    document.getElementById('rechts').style.height = h+"px";
}

 

[strolch00]

JS kann man aber deaktivieren und ich weis 100%ig das es auch ohne geht nur mit hilfe von HTML und CSS

aber danke für den Tipp ich werd es als letzte Maßnahme ich Kopf behalten

 

[burnred]

CSS kann man auch deaktivieren

Zum Thema JS deaktiviert: mal ehrlich der geringe Prozentsatz von Usern bei denen das der Fall ist wäre mir völlig egal.. die müssen halt damit leben das nicht alles so aussieht wie bei normalen Usern.

naja ne CSS Variante würde mich auch interessieren aber nen height: 100% wird ja ignoriert und ne andere Möglichkeit seh ich nicht.

 

[strolch00]

habe das gerade probiert es will aber auch net so ganz

https://css.fractatulum.net/sample/layout7format.htm

was ich überhaupt net verstehe manchmal geht
html, body {
height: 100%;
margin: 0;
}

und manchmal nicht

 

[ZeroCCC]

geht ganz einfach... vom prinzip her:

#page {
  padding: 0;
  margin: 0 auto;
  background: url(images/menu_bg.jpg) repeat-y;
  background-color: #ddd; /*oder so*/
}

 

[strolch00]

geht ganz einfach... vom prinzip her:

#page {
  padding: 0;
  margin: 0 auto;
  background: url(images/menu_bg.jpg) repeat-y;
  background-color: #ddd; /*oder so*/
}

danke genau das ist es was ich gesucht habe wusste gar net das das so geht

jetzt hab ich nur noch ein problem der IE kann es der FF nicht *wow mal was ganz anderes *

 

[ZeroCCC]

doch kann auch der firefox... wenn du mal border: 1px solid black; setzt siehst du wo das problem ist. mach mal noch clear: both; rein.

 

[strolch00]

so also das border ist drin man sieht es am oberen menü
und das clear: both; ist im footer

in #main bringt es nix

irgendwie schnall ich css noch net so ganz

 

[strolch00]

erledigt habe es mit einem <div style="clear: both"></div> vor dem Footer gelöst

Spz Thx nochmal an ZeroCCC