Reputation: 3182

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.

Upvotes: 1

Answers (6)

ntgCleaner

Reputation: 5985

You've given a background color to .footer and .push. So when there's no content on the page, you're seeing the .push div (looks like it's doubled). When there IS content on the page, the .push div is technically behind the footer because of the negative margin on the body.

Remove the background color from your .push div:

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

Upvotes: 0

krunos

Reputation: 163

Here is an working example

html:

<div id="wrapper">
    <div id="push"></div>
</div>
<footer></footer>

CSS:

*{
  margin:0;
  padding:0;
}

html,body{
  height:100%;
}

#wrapper{
  min-height:100%;
  height:auto !important;
  height:100%;
  margin:0 auto -150px; /* minus the height og the footer */
}

#push, footer{
  height:150px; /* push needs same height as footer */
  clear:both;
}

footer{
  background:red;
}

Upvotes: 0

Masoom

Reputation: 731

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.

Upvotes: 3

Milan

Reputation: 893

Simply replace .footer, .push with this. That should do the trick:

.footer, .push {
    height: 4em;
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
}

https://jsfiddle.net/6xwfvwxa/4/

Upvotes: 1

DavidDomain

Reputation: 15293

Just use the example from the Bootstrap page.

Sticky footer with fixed navbar

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

html {
  position: relative;
  min-height: 100%;
}
body {
  margin: 0 0 126px 0;
}

.rowPush{
  padding-bottom:50px;
}


.wrapper {
  margin: 0 auto -4em;
}


.footerStyle {
  position: absolute;
  bottom: 0;
  height: 126px;
  width: 100%;
  background-color: #a9a9a9;
}

.footerStyle h5 {
  line-height: 126px;
  vertical-align: middle;
  margin: 0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="wrapper">
  <div class="container">
    <div class="eventPadding">
      <div class="row rowPush" id="features">
        Details
      </div>

      <div class="col-lg-12 col-md-12 col-sm-12 text-center">
        1 2 3 4 5
      </div>

    </div>
  </div>
</div>
<footer class="footerStyle text footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <h5>Copyright &copy; 2015</h5>
      </div>
    </div>
  </div>
</footer>

Upvotes: 2

Ramiz Wachtler

Reputation: 5683

How about this -

html, body{
     height: 100%; 
}

Fiddle

Upvotes: 1

Sticky Footer isn&#39;t sticking

Answers (6)

Related Questions

Sticky Footer isn't sticking