粘脚不粘
粘脚不粘
提问于 2015-08-23 18:04:02
问题背景：
我编辑了这个问题，以显示我对所做的更改。
我在我的网站上使用一个粘性页脚(在这里使用：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，则此问题不会出现：
任何帮助解决这一问题将是非常感谢的。
回答 6
Stack Overflow用户
回答已采纳
发布于 2015-08-26 08:37:43
这是因为，您为.footer和.push都提供了相同的CSS样式，而元素.push则存在于其他容器中。因此，当内容较少时，它是分裂的。
要除去分裂：
要么应该删除.push元素，要么从该元素中删除push类。
<div class="push"></div>或者您可以删除.push元素的CSS样式，而只为.footer元素提供样式。
.footer{
height: 4em;
background-color: #a9a9a9;
}这样你们分裂的问题就能解决了。为了使其固定在窗口的底部，将下面的CSS样式添加到.footer中，并为<body>添加padding-bottom: 4em;。这里，4em是因为.footer的高度也是4em。它将防止隐藏在.footer后面的内容。
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;你可以给一些padding-top的外观和感觉。
Stack Overflow用户
发布于 2015-08-23 18:32:02
只需使用“引导”页面中的示例即可。
带固定肚脐的粘脚
@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 © 2015</h5>
</div>
</div>
</div>
</footer>
Stack Overflow用户
发布于 2015-08-23 18:29:07
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32169777
复制相关文章
相似问题
腾讯云开发者
