【发布时间】：2015-08-27 01:35:00
【问题描述】：
问题背景：
我已编辑此问题以显示我所做的更改。
我在我的网站上使用了粘性页脚（此处使用：http://ryanfait.com/sticky-footer/）
问题：
以前，有人问过这个问题是关于如何让页脚保持不变。我现在将它贴在页面底部但出现了一个新问题，即页脚正在“拆分”，如图所示：
代码：
这是我的标记：
<!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 属性一起增加到更大的值，那么这会将包装器和页脚em 属性增加到诸如7 之类的值，不会发生拆分（或它们合并）显然我不想这样，如图：
我希望高度分别保持在4em 和-4em。
如果页面上有多个Panel，则不会出现此问题：
任何帮助解决这个问题将不胜感激。
【问题讨论】：
-
请用生成的 static HTML 和 CSS 发布一个演示。
-
如何在浏览器中使用检查器来查看导致该问题的原因？
-
@ManojKumar 我添加了一个 JSFiddle
标签： html css sticky-footer