粘性页脚不粘

Question

问题背景：

我已经编辑了这个问题以显示我所做的更改。

我在我的网站上使用粘性页脚（如此处所用：http://ryanfait.com/sticky-footer/）

问题：

之前，有人问我如何让页脚固定。我现在把它贴在我的页面底部但是出现了一个新问题，因为页脚是 'splitting'，如图所示:

代码：

这是我的标记：

<!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>

样式：

<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>

如果我将 .wrapper margin -4em 属性和 .footer -4em height 属性都增加到一个更大的值，那么这会将 wrapper 和 footer em 属性增加到这样的值由于 7 没有发生拆分（或者它们合并），显然我不希望这样，如图所示：

我希望高度分别保持在4em和-4em。

如果我在页面上有多个 Panel 则不会出现此问题：

如能帮助解决此问题，我们将不胜感激。

Answer 1

这个怎么样-

html, body{
     height: 100%; 
}

Fiddle

Answer 2

只需使用 Bootstrap 页面中的示例。

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>

Answer 3

只需将 .footer、.push 替换为这个即可。这应该可以解决问题：

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

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

Answer 4

这是因为，您为 .footer 和 .push 提供了相同的 CSS 样式，而元素 .push 存在于其他容器中。因此当内容较少时它正在分裂。

要删除拆分：

您应该删除 .push 元素或从该元素中删除 push class。

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

或者您可以删除 .push 元素的 CSS 样式，只为 .footer 元素提供样式。

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

这样你分裂的问题就解决了。并使其固定在 window 的底部，将下面的 CSS 样式添加到 .footer 并为 <body> 添加 padding-bottom: 4em;。这里 4em 是因为 .footer 的高度也是 4em。它将防止内容隐藏在 .footer.

后面

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

你可以给一些 padding-top 的外观和感觉。

Answer 5

您已经为 .footer 和 .push 设置了背景颜色。因此，当页面上没有内容时，您会看到 .push div（看起来翻了一番）。当页面上有 IS 内容时，.push div 在技术上落后于页脚，因为正文上有负边距。

从您的 .push div 中移除背景颜色：

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

Answer 6

这是一个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;
}

粘性页脚不粘

Sticky Footer isn't sticking

html

css

sticky-footer