Question

问题背景：

我已编辑此问题以显示我所做的更改。

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

问题：

以前，这个问题被问到如何让页脚粘住。我现在已经坚持我的页面底部但是一个新的问题已经过了，因为页脚正在分裂＆＃39;如图所示：

代码：

这是我的标记：

application.title = Installation Wizard

application.startupGroups = mainWindow

application.autoShutdown = true

mvcGroups.mainWindow.model = com.install.gui.MainGuiModel

mvcGroups.mainWindow.view = com.install.gui.MainGuiView

mvcGroups.mainWindow.controller = com.install.gui.MainGuiController

mvcGroups.secondaryWindow.model = com.install.gui.SecondaryGuiModel

mvcGroups.secondaryWindow.view = com.install.gui.SecondaryGuiView

mvcGroups.secondaryWindow.controller = com.install.gui.SecondaryController

样式：

@ArtifactProviderFor(GriffonController.class)
public class MainGuiController extends AbstractGriffonController {

    private MainGuiModel model;

    public void setModel(MainGuiModel model) {

        this.model = model;

    }

    @Threading(Threading.Policy.INSIDE_UITHREAD_ASYNC)

    public void click() {

        model.setClickCount(model.getClickCount() + 1);

        getApplication().getWindowManager().show("secondaryWindow");

    }

}

如果我将<!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>属性一起增加到更大的值，那么这会将包装器和页脚em属性增加到.wrapper margin -4em这样的值，即分割不会发生（或他们合并）显然我不想这样，如图所示：

我希望高度分别保持在.footer -4em height和7。

如果页面上有多个4em，则不会出现此问题：

非常感谢您对此问题进行排序的任何帮助。

Answer 1

只需使用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 2

这个怎么样 -

html, body{
     height: 100%; 
}

Fiddle

Answer 3

用这个简单地替换.footer，.push。这应该是诀窍：

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

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

粘性页脚不会粘住

3 个答案: