Sticky Footer isn't sticking

Question background:

I have edited this question to show the changes I have made.

I am using a sticky footer (as used here:http://ryanfait.com/sticky-footer/) on my website

The Issue:

Previously, this question was asked on how I could get the footer to stick. I now have it sticking to the bottom of my page but a new issue has reaered in that the footer is 'splitting', as shown:

Code:

This is my Markup:

<!DOCTYPE html>
<html>
<head>
    <link href="~/Content/bootstrap-social.css" rel="stylesheet" />
    <link href="~/Content/Styles.css" rel="stylesheet" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="~/Images/FMFCFavicon.ico" type="image/x-icon">
    <link rel="icon" href="~/Images/FMFCFavicon.ico" type="image/x-icon">
    <title>FMFC</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <nav class="navbar navbar-default" role="navigation" id="nav">
            <div class="container">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand logo">FM<b>FC</b></a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href='@Url.Action("Home", "Home", null)'>Home</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
        <div class="wrapper">
            <div class="container">
                <div class="eventPadding">
                    <div class="row" id="features">
                        @foreach (var eventDetail in @Model)
                        {
                            <div class="col-lg-12 col-sm-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3>@(eventDetail.Name)</h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>
                                            <img src="@(eventDetail.Image)" class="img-circle" id="eventImages" alt="Work">
                                        </p>
                                        <p>
                                            <h5><b>Date: @(eventDetail.Date)</b></h5>
                                        </p>
                                        <p>
                                            <h5><b>Time: @(eventDetail.Time)</b></h5>
                                        </p>
                                        <p>
                                            <h5><b>Location: @(eventDetail.Location)</b></h5>
                                        </p>
                                        <p class="text-center"><h5>@(eventDetail.Description)</h5></p>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div class="push"></div>
        </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>


    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/CustomScripts.js"></script>
</body>
@Scripts.Render("~/bundles/bootstrap")

</html>

Styles:

<style>
    * {
        margin: 0;
    }

    html, body {
        height: 100%;
    }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -4em;
    }

    .footer, .push {
        height: 4em;
        background-color: #a9a9a9;
    }
</style>

If I increase both the .wrapper margin -4em property to a larger value along with the .footer -4em height property then this increases the wrapper and footer em properties to a value such as 7 the split does not occur (or they merge) obviously I do not want this, as shown:

I want the height to be kept at 4em and -4em respectively.

If I have more than one Panel on the page then this issue does not appear:

Any help in sorting this issue out will be much appreciated.

Solution

It is because, you have given same CSS styling for both .footer & .push whereas the element .push is present in other container. Hence it is splitting when content is less.

To remove the splitting:

Either you should remove .push element or remove push class from that element.

 <div class="push"></div>

Or you can remove CSS styling for .push element and give only for .footer element.

.footer{
    height: 4em;
    background-color: #a9a9a9;
}

By this you splitting issue will be resolved. And to make it fixed to the bottom of the window, add the below CSS styling to .footer and also add padding-bottom: 4em; for <body>. Here 4em is because is given as the height of the .footer is also 4em. It will prevent the content to get hidden behind .footer.

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

And you can give some padding-top for look and feel.