Main Bereich strecken, damit die ganze Seite ausgefüllt ist

  • Hey,


    ich habe in einem Shop ein paar Seiten bei dem zu wenig Inhalt im Main Bereich ist. Aufgrund dessen wird z.B. wenn keine Ware im Warenkorb ist, die Seite nur zur Hälften Höhe angezeigt und der Rest bleibt weiß, und wenn mehrere Produkte im Warenkorb drin sind wird die Höhe des Main Bereiches größer.


    Wie kann ich nun dynamisch die Höhe des Main-Bereiches so festlegen, dass diese den vollen Screen nutzt und bei Produkte dynmaisch mit geht.


    Ich habe es schon mit vh, %, und em getestet aber hat nicht so gut funktioniert. Die Höhe bleibt entweder so wie diese ist oder ist eben so statisch, dass wenn Produkte hinzukommen der Footer nicht dyamisch mitgeht sondern stehen bleibt und die Produkte in den Footer reinragen.


    Hat jemand eine Idee wie ich dies dynamisch und responsive erledigen kann?


    Anbei ist ein Bild.


    Schöne Grüße

  • Ich denke, min-height ist da das Zauberwort:

    Das mit header, main und footer ist geraten, auf Grund deines Bildes.

  • Hey,


    danke für deine Antwort. Hat nun bei mir jedoch nichts gebracht. Auch nicht mit !important.


    Ich nutze Wordpress mit WooCommerce. Dort sind ein paar Seiten so wie das Bild. Wenn der Warenkorb zum Beispiel voll ist werden die Bereiche wieder auf den ganzen Viewport gestreckt.

  • Hey,


    mit den anderen Wertetypen habe ich auch bereits einiges getestet.


    1vh hilft auch nichts. Die vh muss 88 sein, damit der Bereich das ganze Fenster ausfüllt. Da ist nur der Nachteil, dass wenn Produkte hinzukommen der Fußbereich noch weiter nach unten geht.


    Dann belasse ich dies einfach so. Ist nicht schlimm wenn das so ist.

  • Die vh muss 88 sein, damit der Bereich das ganze Fenster ausfüllt. Da ist nur der Nachteil, dass wenn Produkte hinzukommen der Fußbereich noch weiter nach unten geht.

    Mit min-height sollte das dann trotzdem klappen wenn mehr Artikel eingegeben werden

    CSS
    html,body{
       height:100% !important;
       min-height:88vh !imporrtant;
    }

Jetzt mitmachen!

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