-
Posts
-
There’s not enough content so the page ends. How can the page have a minimum height? I know there’s a color section but is there a way to do it without that? I can’t use a color section on blog category pages. So like if there’s just one result in the category is too short just like this one.
I see that all content between the header and footer is inside class container_wrap container_wrap_first main_color fullsize
I set that to 100vh and it did not make it any bigger.Any help would be appreciated. I don’t want to anchor the footer universally to the bottom of the page because it would mess up the other pages that are longer than 100%. I do want the main content of the page to at least take up 100% of the screen.
Thanks,
Brendon
Hey feoleb,
Try this code in the General Styling > Quick CSS field:#top #wrap_all #main .container { min-height: 100vh !important; }Please clear your browser cache and check.
Best regards,
MikeHey, thanks.
That made the footer huge too. I used the following code to make only the content between the header and footer be 100% of the page (minus 46 pix because my header menu is 46px). Keeping in mind it won’t look right until you log out of wordpress because there’s a black bar at the top when you are logged in. Now I’m trying to figure out if there’s a way to calculate footer height and subtract that as well so the footer always shows flush to the bottom of the screen if there’s room for it. Different browsers show slightly different heights on the footer due to the way they display text so I can’t just do it manually without it looking a little sloppy.
.main_color {
min-height:calc(100vh – 46px) !important;
min-height:-moz-calc(100vh – 46px) !important;
min-height:-webkit-(100vh – 46px) !important;
min-height:expression(100vh – 46px) !important;
min-height:-o-calc(100vh – 46px) !important;
}Hi,
Do you mean that you want the footer to show on the bottom of the page without scrolling, or have the footer the same height on different browsers after scrolling?
If it’s the first, try adjusting the “100vh” to about “69vh”, if it’s the second, it looks as though it is doing that now on Chrome, Firefox, & Edge, on Windows.
Please see screenshot in Private Content area.Best regards,
MikeHello Mike, I want the footer to display fully if there is available space. So the height would be height – (header + footer) However the footer height isn’t set in stone so it’ll display wrong in some browsers. I think I would need to use javascript somehow to calculate the footer height, then somehow use that information to adjust the minimum height of the page. However, what is currently happening now is pretty clean and works too.
Actually what I originally posted does not work.
.main_color { min-height:calc(100vh – 46px) !important; min-height:-moz-calc(100vh – 46px) !important; min-height:-webkit-(100vh – 46px) !important; min-height:expression(100vh – 46px) !important; min-height:-o-calc(100vh – 46px) !important; }There are multiple main_color classes on other pages and it makes those pages huge because ever main_color section is the entire height of the monitor. So I dunno. Stumped.
Hi,
Can I ask if you plan to have many pages that don’t have much content and the footer would be fully displayed without scrolling?
Because you could set the footer as fixed to the bottom of the page then it would be correct in any browser.I changed the classes so it won’t effect the footer container now.
#top #wrap_all #main .main_color.container_wrap_first { min-height:100vh !important; } #footer { position: fixed; bottom: 0; width: 100%; }You would probably want to add a media query to this so it won’t be used for mobile & tablets because the footer height will take up too much space. In those cases try using only the 100vh and the user can scroll to see the footer.
Best regards,
Mike
- You must be logged in to reply to this topic.