How to stick the basement to the bottom of the screen , not the page, because everywhere I can only see how everyone writes that you need to write margin-top: -50px; but it only lowers the footer to the bottom of the page , not the screen . But I need to, if the information is small, the basement would be downstairs, and as the information is already larger than the screen, then it moved along the page height.

What the basement looks like now:

alt text

CSS code of the footer:

 #foot { background-color: green; border-radius: 5px; clear: both; height: 35px; margin: -50px auto 0px; position: relative; }
  • one
    If you can’t do it manually, try using [template generator] [1]. At the same time, look, ready-made markup and CSS. [1]: csstemplater.com - Deonis
  • I tried, took the whole code of the footer, and replaced it, the same. - Angus123
  • I very much doubt that they have been. More precisely, the code for the footer may be taken, but it is only necessary to take into account that some other styles of elements also affect its position. Put your code on jsfiddle.net - Deonis
  • Here is the link: How to press the footer (basement) to the bottom . Here it seems that you need, with explanations and an example. It may help. - Karalahti
  • one
    Possible duplicate question: How to press the footer always to the bottom of the screen? - Vadizar

3 answers 3

Of course, belatedly, but here's a ready-made solution:

 body, html { width: 100%; height: 100%; } .wrapper { width: 100%; min-height: 100%; } header { width: 100%; height: 70px; background: black; color: #fff; } footer { width: 100%; height: 50px; background: #000; color: #fff; margin-top: -50px; } 
 <div class="wrapper"> <header>HEADER</header> <div class="content"></div> </div> <footer>FOOTER</footer>

Jsfiddle example

    min-height block set with content?

    As for example:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; } h1 { margin:0; text-align:center; } #container { min-height: 100%; position: relative; } #header { background: #ff0; padding: 10px; } #body { padding: 10px; padding-bottom: 60px; /* Высота футера*/ } #footer { position: absolute; bottom: 0; width: 100%; height: 60px; /* Высота футера */; background: #6cf; } </style> <!--[if lt IE 7]> <style type="text/css"> #container { height: 100%; } </style> <![endif]--> </head> <body> <div id="container"> <div id="header"><h1>Заголовок</h1></div> <div id="body"><h1>Контент</h1></div> <div id="footer"><h1>Подвал</h1></div> </div> </body> </html>
    • No, I did not. - Angus123
    • So what are you trying? - Smash
    • Already tried, now the rule is: #foot {margin: -35px auto 0; min-width: 1000px; height: 35px; background-color: green; position: relative; border-radius: 5px; clear: both; } - Angus123

    Try for the body to put a minimum height of 100%, and for a footer negative margin equal to the height of the footer itself.

    Well, and more on the topic from Habra: Footer nailed to the bottom with his own hands