Menu
I know about sticky footer. But my situation is that I am developing a website that will be used on PC & mobile devices. Therefore, the footer displayed gets adjusted by width of the screen.
And footer's height gets changes on each resolution.
Can anyone have idea that how could I display footer on the bottom of the page(not screen). Some page's height is small, and footer gets displayed in between of page.
I have following structure:
<body style="height:100%;">
<div style="height:100%;">
<div id="wrapper" style="height:100%; max-width:800px;">
<div id="header">
some content
</div>
<div id="content">
some content
</div>
<div id="footer" style="position:relative; width:100%;">
some content
</div>
</div>
</div>
</body>
267
This might clear something up:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
