Create a Sticky Footer with a footer.php File

Question

how do I create a sticky footer using a footer file.For example when I create a footer.php file and include it to the main page, how do I make it a sticky footer.By my search, the best way to create a sticky footer is to use the wrapper tag, as shown in the codes below.

<div class="wrapper">
    <header>header</header>
    <div class="main">
        vfdgdgdgdf
    </div>
    <div class="push"></div>
</div>
<footer>Foo</footer>

this is the css codes

html,body{
    height:100%;
    min-height: 100%;
}

.main{
    min-height: 100%;
    height:100%;
}

header{
    height:50px;
    background-color: #ccc;
}



.wrapper{
    min-height: 100%;
    height:100%;
    margin: 0 0 -60px;   
}
.push{
    height:60px;
}

footer
{
    background-color:grey;
    position:relative;
    height:60px;
    width:100%;
}

but can that be used when we include a separate footer file for example

<header> </header>
<body>
<?php include('header.php');?>
 
  
<?php include('footer.php');?>
</body>

As was stated in an answer, the PHP doesn't matter. Check out http://ryanfait.com/html5-sticky-footer/ for how to implement a sticky footer with html and css — Hayden, Jul 14 '15 at 14:44

Peyman Mohamadpour · Answer 1 · 2015-07-14T14:22:16.350

It does not matter for CSSif you included part of your markup from another file, as this happens on server-side and CSS is a matter of client-side. So just ignore the inclusion part and just do it like this:

footer{
    height: 100px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

You may see it working on this snippet:

#main{
  background-color: #dfdfff;
}
footer{
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #ffdfdf;
}

<div id="main">
  This is the content of the page
  <footer>This is the footer section</footer>
</div>

score 0 · Answer 2 · answered Jul 14 '15 at 14:18

0

try this,

footer
{
background-color:grey;
position:absolute;
height:60px;
width:100%;
}

answered Jul 14 '15 at 14:18

Create a Sticky Footer with a footer.php File

2 Answers2