The following situation arose, wrapped the site content in a wrapper , in order to press the footer to the bottom of the page. After that, the height of the Bootstrap of the content block is not set as a percentage. To be more precise, the expected result is displayed in Opera, but in other browsers does not work.
Here is the approximate code of the page (without content):

 <html><head> <title><?php echo $title;?></title> </head> <body> <div class="page-wrapper"> <div class="container"> <div class="row"> <div class="col-md-12">Контент</div> </div> <!-- End row --> </div> <!-- End container --> <div class="page-buffer"></div><!-- End buffer --> </div><!-- End wrapper --> <div class="page-footer"> <div class="text-align-center">Футер</div> </div><!-- End footer --> </body></html>

CSS styles for wrapper :

  .page-wrapper { min-height: 100%; margin-bottom: -50px; } * html .page-wrapper { height: 100%; } .page-buffer { height: 50px; clear: both; } .page-footer { height: 50px; }

It would be desirable, that container occupied at least 90% of height of the page.

  • I wrote about it like that grigoriev.pw/lab/pure-sticky-footer , here and about your version and about the fact that you should not use it and about a more successful version) - Pavel_G
  • if the content height exceeds the page height, then the footer "freezes" in place, and the page can be flipped further, while the footer can be scrolled through :) - DMITRY
  • If you're talking about my version, please show me an example, I'll write what's wrong - Pavel_G
  • <html> <head> <meta charset = "UTF-8"> <title> Test </ title> <link rel = "stylesheet" href = "css / main.css" /> <style type = "text / css "> </ style> </ head> <body> <div class =" wrap "> <nav class =" header "> </ nav> <div class =" content "> </ div> <div class =" boofer "> </ div> </ div> <footer class =" footer "> </ footer> </ body> </ html> - Dimitri
  • you have all elements height: 100%; - remove it from the body? then for html position: relative; Well, the body should have a margin-bottom height of the footer - this is for the variant with the footer on the absolute ie where the markup is without a wrapper. look at the second option, it is cleaner and for me it’s less a mess. grigoriev.pw/lab/pure-sticky-footer - Pavel_G

0