Common footer for all web pages

Question

I have a website where I need to have a common footer for all the pages. However the pages content varies and few pages have less body and few have scrollable body. But my footer doesn't stay the same for all the pages. I need it to be at the bottom for all the pages (after the body). I tried multiple ways using CSS, javascript, jquery but they work only for one page and not all together.

Could someone help me with this.

Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — APAD1, Aug 02 '16 at 20:28
your markup which is expected to be shown in the browser should be inside the `body` tag. — coderodour, Aug 02 '16 at 20:34
I have few grids in the body and I need the footer after all the grids. — Sri, Aug 02 '16 at 20:34
Do you want it on the bottom everywhere, or the same everywhere, or something else? Please clarify. — , Aug 02 '16 at 21:10
@Sri if you want the same footer everywhere, create a php footer and include it your files. If your files are currently .html, the easiest way to make this work would be to rename them to .php but there are other ways — Rachel Gallen, Aug 02 '16 at 21:19

score 0 · Answer 1 · answered Aug 02 '16 at 21:13

I have struggled with this as well! I have learned that the key is to have a wrapper id:

html:

<html>

<body>
<div id="wrapper">


<div class="content">

<p> This is the content! </p>

</div> <!-- content -->



<footer>

<p> This is the footer!!! </p>

</footer>

<div> <!--#wrapper-->

</body>

</html>

css:

html {
height:100%;
}


body {
height:100%; 
}

#wrapper{
min-height:100%;
position: relative;
}

footer{
position:absolute;
bottom:0px;
background-color: black;
color: white;
width:100%;
padding-top: 25px;
padding-bottom: 25px;
text-align:center;

}

@Sri pls don't use this answer! – Rachel Gallen Aug 02 '16 at 21:15 — Rachel Gallen, Aug 02 '16 at 21:15

Common footer for all web pages

1 Answers1