Here is the html and css design to keep the html footer at bottom in a web view.
Here is the description of the css, we have use the Footer Height as a variable and there is a wrapping element 'content' class that holds everything except the footer. It had a negative margin equal to the height of the footer. Also note we have added padding-bottom to the content as to ensure that negative margin do not pull up the footer and cover any content area.
.content { margin: 0 auto ([-Footer Height]); background-color: yellow; padding-bottom: [Footer Height]; } .footer { /*new changes*/ position: absolute; left: 0 ; right: 0; bottom: 0; height:[Footer Height]; background-color: blue; }
Add the following html defining body content and a footer.
<div class="content"> <h2>Sticky Bottom Footer in Simple CSS</h2> <p>Show Content</p> <img src="imagepath" /> </div> <footer class="footer"> Bottom Footer </footer>
Add the css styles
html { height: 100%; } body { font-family: Arial, Helvetica, sans-serif; min-height:100%; position:relative; } .content { margin: 0 auto -72px; background-color: yellow; padding-bottom: 72px; } .footer { /*new changes*/ position: absolute; left: 0 ; right: 0; bottom: 0; height:72px; background-color: blue; }