[Resolved] Set Page Height to 100vh

Home Forums Support [Resolved] Set Page Height to 100vh

Home Forums Support Set Page Height to 100vh

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1648869
    Timo de Vries

    Hi guys,

    I am trying to set pages to full height. I found this code in one of your support threads:

     @media (min-width: 1024px) {
         body {
             display: -webkit-box;
             display: -ms-flexbox;
             display: flex;
             -webkit-box-orient: vertical;
             -webkit-box-direction: normal;
             -ms-flex-direction: column;
             flex-direction: column;
             min-height: 100vh;
        }
         .site-footer {
             margin-top: auto;
        }
         .container.grid-container {
             width: 100% !important;
        }
    }

    … it’s working fine, but not in IE11: the footer does not stick at the bottom and the main nav height get’s somehow “doubled” using my logo – seems to be realted to display:flex; somehow.

    Can you help me?

    #1649006
    David
    Staff
    Customer Support

    Hi there,

    can’t unfortunately provide a fix for that as IE’s flexbox does some unexplainable things.

    You might want to try this method – which forces the #page to 100vh minus the height of the header and the footer:

    #page {
      min-height: calc(100vh - 66px - 63px);
    }
    #1649236
    Timo de Vries

    thanks, David!

    As I have some custom page heroes that add additional height, I’ll have to experiment with them, but I’ll figure it out 🙂

    #1649240
    David
    Staff
    Customer Support

    You may want to just apply that CSS to the problem pages.

    For example the 404:

    .error404 #page {
      min-height: calc(100vh - 66px - 63px);
    }
    #1649253
    Timo de Vries

    In my individual case, the page heroes are different in height as they are built with different custom fields per post. Is there a way to assign custom classes per page (same as for the 404-page)?

    And I just encountered, that with the new method, it seems that I can’t vertically center my containers in IE11 (it’s so annyoing that my customers need IE support) anymore – see the link attached. Any ideas?

    #1649782
    Elvin
    Staff
    Customer Support

    In my individual case, the page heroes are different in height as they are built with different custom fields per post. Is there a way to assign custom classes per page (same as for the 404-page)?

    WordPress adds the page id to it’s body’s classlist. You can use that.

    Example:

    .page-id-2 #page {
      min-height: calc(100vh - 66px - 63px);
    }

    And I just encountered, that with the new method, it seems that I can’t vertically center my containers in IE11 (it’s so annyoing that my customers need IE support) anymore – see the link attached. Any ideas?

    I’m not sure I understand what you mean.

    To clarify: Do you want the hero sections to behave this way (automatically centered)? https://share.getcloudapp.com/llu9DnXO

    If so, try doing this:

    Add vertical-center class to the section container.

    You then add this CSS:

    .vertical-center.gb-container {
        height: calc( 100vh - 66px );
        align-items: center;
        display: flex;
    }

    Note: tested in IE version 11.1198.18362.0

    A wise man once said:
    "Have you cleared your cache?"

    #1651423
    Timo de Vries

    ..wasn’t exactly what I meant but I could solve the issue based on your suggestion 🙂
    Thanks!

    BTW: You guys provide awesome support!

    #1651454
    Elvin
    Staff
    Customer Support

    Nice one. Glad to point you to the right direction. No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.