All geek questions in one place

CSS - create a FLUID height footer at the bottom of the page

If the page does not have a lot of content, for example 300 pixels, the footer will appear in the middle of the page with a resolution of 1024.

How could I draw a footer at the bottom of the page without knowing the height of the footer?

I tried this solution:

/* css */ html, body { height: 100%; } #container { min-height: 100%; position: relative; } #footer { position: absolute; bottom: 0; } <!-- html --> <html> <head></head> <body> <div id="container"> <div id="footer"></div> </div> </body> </html>

but the problem is that I need to add padding-bottom: (footerheight); into the element before #footer. This is not possible because the height of the footer varies depending on the page ...

+4
source share
2 answers

Why don't you just use the minimum height in the content area, so if you set the minimum height to 600 pixels, if only 300 pixels of content would fill the footer another 300 pixels, so it's not in the middle of the screen

+2
source

You cannot avoid this, but there is a trick: make the background image of the body the same as the footer, and then place all the contents inside the container on top of the body.

This will make the footer 75px. Note the corresponding -75px size in the div container.

 html { height:100%; padding:0px; margin:0px; } body { height:95%; padding:0px; margin:0px; background-color:#1C303C; } footer { background-color:#1C303C; color:#FFFFA3; display:block; position:absolute; width:100%; min-height:75px; height:75px; margin:0px; padding:0px; left:0px; } #container { background-color:#FFFFFF; min-height:100%; height:100%; width:100%; top:0; left:0; margin: 0; padding:0; margin-bottom:-75px; }

with the appropriate HTML as follows:

 <body> <div id="container"> </div> <footer> </footer> </body>
0
source

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

More articles:


All Articles