Stick footer to bottom with CSS
Posted by admin in html / css
Here is some usefull code how to stick footer to the bottom of browser with CSS.
HTML code:
<html>
<title>Stick Footer</title>
<body>
<div id=”container”>
<div id=”content”>
<p>Content text …</p>
</div>
<div class=”push”></div>
</div>
<div id=”footer”>
<p>Footer text …</p>
</div>
</body>
</html>
CSS code:
* {
margin: 0;
}
html, body {
height: 100%;
}
#container {
width:700px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto -40px; /* the bottom margin is the negative
value of the footer’s height */}
.push {
height: 40px; /* .push must be the same height as #footer */
}
#content {
padding:20px;
}
#footer {
width:700px;
margin:0px auto;
height: 40px;
}
Here is example.
tukaj je se en primer:
http://www.themaninblue.com/writing/perspective/2005/08/29/
js bi pa rabu takega ko scrollas content da je footer vedno viden, tega se pa ne vidi na tvojmu primeru, ker ni velik texta v contentu
Sem pripravila primer za fiksiranje noge na spodnji rob in sicer tukaj.