Archived topic
Set Page Height to 100vh
7 replies · Started by Timo de Vries on February 7, 2021
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?
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);
}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 :-)
You may want to just apply that CSS to the problem pages.
For example the 404:
.error404 #page {
min-height: calc(100vh - 66px - 63px);
}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?
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
..wasn't exactly what I meant but I could solve the issue based on your suggestion :-)
Thanks!
BTW: You guys provide awesome support!
Nice one. Glad to point you to the right direction. No problem. :)
