html - Create sticky footer using Css -


hello trying create sticky footer described in this beatiful article. getting scroll bar on browser, , footer "slides" out of screen borders. here code:

html:

<div id="page">         <div id="header">             <div id="main_menu">             </div>         </div>         <div id="content">             fdsfsdfsdfsd             <div id="push"></div>         </div>         <div id="footer"></div> </div> 

css:

html, body {     height: 100%; }  #content {     min-height: 100%;     height: auto !important;     height: 100%;     margin: 0 auto -28px; }   #push, #footer {     height: 28px;      clear: both; } 

can me? doing wrong?

you should use wrapper instead of targetting #content.

html, body, #page {      height: 100%;      margin: 0;      padding: 0;  }  #wrapper {      min-height: 100%;      height: auto !important;      height: 100%;      margin: 0 auto -28px;  }  #push, #footer {      height: 28px;      clear: both;  }    #footer {      background-color: green;  }
<div id="page">      <div id="wrapper">          <div id="header">              <div id="main_menu"></div>          </div>          <div id="content">fdsfsdfsdfsd</div>          <div id="push"></div>      </div>      <div id="footer"></div>  </div>


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -