SliderMenu - Höhe nicht anpassbar

    Hi Leute,


    ich hab auf meiner HP eine SliderMenu eingebaut, dass sich von links ins Bild schiebt. Sieht soweit auch gut aus (zumindestens bei mir, die Seite ist noch in der Beta-Phase), allerdings habe ich z.B. bei der Seite Kontakt festgestellt, dass das Menu sich nur um die Höhe der gegebenen Elemente wrapped. Sprich, wenn die Kontaktseite kürzer als 100% Bildschirmhöhe ist (bei meinem Display mit 1920x1080 Px), fällt die Höhe des Menus auch kleiner aus, was etwas uncool aussieht :S Da ein Bild mehr als 1000 Worte sagt, schaut doch am besten mal selber: www.web-berger.de/kontakt


    Jetzt wäre meine Idee gewesen, ich setze im CSS beim .mp-menu ein

    CSS
    height = 100%;
min-height = 100%;


    aber das ändert leider gar nichts. Als nächstes wäre meine Idee gewesen, ein div zu erstellen, dass mit

    CSS
    bottom = 0;
height = 1px;
width = 100%;
opacity = 0;


    einmal quer über den Bildschirm geht, aber nicht sichtbar ist und immer unten klebt. Sobbald man dann aber das Menu öffnet, wird das div (ich habs mal eingefärbt gehabt) bis ans nächste Element nach oben geschoben :cursing: Also an das margin-bottom vom Kontaktfeld (.kontaktformular).


    Was mir eventuell helfen würde, wäre ein div-Element das eine min-height hat, die ( 100% - height(.kontaktformular) ) hat. Aber wie erstellt man sowas in CSS? Oder hat jemand noch eine andere, bessere Idee? 8)


    Gruß, GtrAngus

    "Sprich, wenn die Kontaktseite kürzer als 100% Bildschirmhöhe ist (bei meinem Display mit 1920x1080 Px), fällt die Höhe des Menus auch kleiner aus, was etwas uncool aussieht"
    Ich verstehe nicht genau, was Du meinst. In meinen Augen sieht alles OK aus. Dass das Menü bei großer Fensterhöhe das Fenster nicht ausfüllt, finde ich überhaupt nicht schlimm, weil der blaue Hintergrund ja bis zum unteren Rand geht.



    "Was mir eventuell helfen würde, wäre ein div-Element das eine min-height hat, die ( 100% - height(.kontaktformular) ) hat. Aber wie erstellt man sowas in CSS?"
    Kennst Du schon CSS-calc? Damit kann man Werte berechnen, z. B. so:

    CSS
    min-height: calc(100% - 400px);

    Wie Du siehst, geht das nur mit festen Werten. Wenn Du dynamisch die Höhe des Formalars verwenden möchtest, geht das, AFAIK, nur mit Javascript.

    Evtl. sieht es bei euch anders aus, dass kann schon sein. Mich stört eben dieser helle Rand unten, der meine Meinung nach davon kommt, dass das Seitenmenü nur bis zum Ende Content wrapped. 8|


    Das dies nur mit Hilfe von JS lösbar sein würde, habe ich schon fast befürchtet :|


    Huhu
    Ich glaube nicht das der z-index daran Schuld ist, da vom Skript her der gesamte Content der Seite innerhalb des menu-divs zusammengefasst ist. Aber ich probiere es mal aus :)


    [Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/unbenannt1yt90zufwdc.jpg]

    Doch, jetzt, wenn ich das Fenster ganz hoch mache, sehe ich es.
    Zitat von Huhu: "gab es da für CSS nicht sowas wie 100vh als Wert für height?" - genau, das müsste die Lösung sein:

    CSS
    min-height: 100vh;

    für .mp-pusher

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden