All geek questions in one place

Sticky footer problems when footer is inside another div block

I have a problem attaching a footer to the bottom of the viewport. I try different approaches, read the footer topics here, read the stickyfooter site, try and no luck, too much Google, so the problem code that I cut can be checked on my site: https://jsfiddle.net/26hf8sh2/

structure

<html> <body> <root> <header> ... </header> <main> ... </main> <footer> ... </footer> </root> </body> </html>

I want to expand the main block to fit the footer if there is not a lot of content, and stick to the footer to the bottom of the viewport if the content is low again when I try to abstract with the absolute positioning of the footer when resizing the browser. Also, if I try something like minimum heights or so, then where there is a lot of content, the footer seems to overlap the content and position it at the bottom, not the bottom of the page. So now I just add a minimum height of 800px and relative positioning. Therefore, if the screen resolution is about 1200 pixels in height, then it looks fine, but when I open it on my mobile device or change the mode to full screen, I see a gap at the bottom. I am trying to encode my site so that you can see the problem, for example, on the page protasov.by/contacts

What am I doing wrong?

Thanks in advance!

+5
source share
2 answers

Ok Let's try something like this:

 html{ min-height:100% } body{ min-height:100% } .root{ position:relative; } footer{ position:absolute; bottom:0; } .wb_main{ margin-bottom:220px; }
0
source

The solution is to simply use the calc function for the minimum height in the main block. I just add:

  min-height: -webkit-calc(100% - 320px); min-height: -o-calc(100% - 320px); min-height: -moz-calc(50% - 320px); /* Firefox 4+ */ min-height: calc(100% - 320px);

100 px is the size of the header, and 220 is the size of the footer. Thus, in short pages, the footer is at the bottom of the viewport.

0
source

Source: https://habr.com/ru/post/1246059/

More articles:


All Articles