All geek questions in one place

Footer - footer and center

I am writing a web page with a fixed footer at the bottom of the page. The page content has a certain width and is centered. The footer also has a certain width and needs to be centered.

Questions:

  • I can not use postiton: fixed - the footer is not centered.
  • The content of the page is loaded dynamically from the database, so I can’t know the exact height
  • If the browser window is very small, the footer gets into the content and closes it. A z-index hardly fixes this because I have a gradient on the background set as the background of the body.

So I need something like float: bottom ....

+4
source share
3 answers

Take a look at this tutorial. I believe that this may be what you are looking for. The footer is fixed and takes into account the top of the div (so as not to overlap). When you visit this page, resize the window to see what I'm talking about.

http://ryanfait.com/sticky-footer/

+2
source

While the other answers do work, you should avoid using negative fields.

Try the following:

 .footerholder { background: none repeat scroll 0 0 transparent; bottom: 0; position: fixed; text-align: center; width: 100%; } .footer { background: none repeat scroll 0 0 blue; height: 100px; margin: auto; width: 400px; }

And the HTML will look like this:

 <div class="footerholder"> <div class="footer"> .... </div> </div>

---------- Change ------------

You must also change your page size to accommodate the height of the footer - otherwise you will never see the bottom content

+13
source 
 .footer{ position:fixed; bottom:0; left:50%; margin-left:-200px; /*negative half the width */ background:red; width:400px; height:100px; }

Check out the working example http://jsfiddle.net/qdVbR/

+6
source

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

More articles:


All Articles