Search code examples
twitter-bootstrapfooter

Push footer off the screen in Bootstrap

I'm try create footer for my page application in Bootstrap. I did it and now my footer looks great on the page. But how I can to hide footer, when global contents of page will be more and all information is not be to fit in browser?

enter image description here

When I will be show more information in the central block, I must hidden footer in the bottom of page. Now footer basement in the bottom of the browser window.

Solution

  • The problem with your current code is that #wrapper doesn't have position: relative. So the #footer is positioned absolute to the viewport.

    html,
body {
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  background: #ededed;
  padding: 10px;
}
#content {
  padding-bottom: 100px;
  /* Height of the footer element */
}
#footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  background: #ededed;
  width: 100%;
}
    <body>

  <div id="wrapper">

    <div id="header">
      Header
    </div>
    <!-- #header -->

    <div id="content">
      Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom
      of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result Global information (When information
      more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more,
      footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result Global information (When information more, footer dont hidden. Footer
      stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay
      in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When
      information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information
      more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden.
      Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer
      stay in the bottom of windows) Pull the line between CSS and Result Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When
      information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the
      line between CSS and Result Global information (When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont
      hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows)(When information more, footer dont hidden. Footer stay in the bottom of windows) Pull the line between CSS and Result
    </div>
    <!-- #content -->

    <div id="footer">
      Footer
    </div>
    <!-- #footer -->

  </div>
  <!-- #wrapper -->

</body>

</html>