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
Post a Comment