Sider - full height container

Hi there,

In your custom CSS, find this:

.site-header {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; /* remove this */
    width: 320px;
    z-index: 300;
    height: 100vh; /* remove this */
}

Then remove the two height attributes.

Then, add this:

#page {
    min-height: 100vh;
}

Hi Tom,

Thanks! This fixed the gap below the left part (.site-header), however the content (#page) is still not 100% height. Any idea?

Hi there,

you have this CSS commented out:

#page {
  /* min-height: 100vh; */
}

If i remove the comment /* and */ the code applies.

One thing to note that different browsers treat 100vh differently based upon browser zoom level.
Let us know.

Hi,

Yes I turned back your modifications, as other pages showed worse layout. I've changed it once again for you. See added link.

Looking at: /stift-musical-encounters i can see the CSS being applied. But the page content is much longer than 100% of the Browser viewport hence there is no noticeable difference with or without the CSS.

The problem on that page is the sidebar, it's not 100% height.

Does this help?:

body {
    background: #bfbfbf;
    background: linear-gradient(90deg, rgba(255,214,93,1) 30%, #bfbfbf 30%);
}

Yes :) Thanks!

You're welcome :)