Html 粘性页脚不是'；t粘住
问题背景： 我已编辑此问题以显示我所做的更改 我在我的网站上使用了一个粘性页脚（在这里使用：） 问题： 在此之前，有人问我如何才能让页脚粘住。我现在将其粘贴在我的页面底部，但出现了一个新问题，页脚是“拆分”，如图所示： 代码： 这是我的标记：Html 粘性页脚不是'；t粘住,html,css,sticky-footer,Html,Css,Sticky Footer,问题背景： 我已编辑此问题以显示我所做的更改 我在我的网站上使用了一个粘性页脚（在这里使用：） 问题： 在此之前，有人问我如何才能让页脚粘住。我现在将其粘贴在我的页面底部，但出现了一个新问题，页脚是“拆分”，如图所示： 代码： 这是我的标记： <!DOCTYPE html> <html> <head> <link href="~/Content/bootstrap-social.css" rel="stylesheet" /> &
<!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>
FMFC
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
切换导航
@foreach（var eventDetail在@Model中）
{
@（eventDetail.Name）
日期：@（eventDetail.Date）
时间：@（eventDetail.Time）
位置：@（eventDetail.Location）
@（eventDetail.Description）
}
版权所有（c）2008
@Scripts.Render（“~/bundles/bootstrap”）
<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>
* {
保证金：0；
}
html，正文{
身高：100%；
}
.包装纸{
最小高度：100%；
高度：自动！重要；
身高：100%；
保证金：0自动-4em；
}
.footer、.push{
高度：4em；
背景色：#A9A9；
}
.wrapper margin-4em.footer-4em height74em-4em面板html, body{
height: 100%;
}
html, body{
height: 100%;
}
只需使用引导页面中的示例即可
@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
html{
位置：相对位置；
最小高度：100%；
}
身体{
利润率：0.126px 0；
}
.rowPush{
填充底部：50px；
}
.包装纸{
保证金：0自动-4em；
}
.页脚样式{
位置：绝对位置；
底部：0；
高度：126px；
宽度：100%；
背景色：#A9A9；
}
.页脚样式h5{
线高：126px；
垂直对齐：中间对齐；
保证金：0；
}
细节
1 2 3 4 5
版权及副本；2015
@导入url（“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
html{
位置：相对位置；
最小高度：100%；
}
身体{
利润率：0.126px 0；
}
.rowPush{
填充底部：50px；
}
.包装纸{
保证金：0自动-4em；
}
.页脚样式{
位置：绝对位置；
底部：0；
高度：126px；
宽度：100%；
背景色：#A9A9；
}
.页脚样式h5{
线高：126px；
垂直对齐：中间对齐；
保证金：0；
}
细节
1 2 3 4 5
版权及副本；2015
.footer, .push {
height: 4em;
position: fixed;
bottom: 0px;
width: 100%;
text-align: center;
}
只需替换.footer、.push即可。这应该可以做到：
.footer, .push {
height: 4em;
position: fixed;
bottom: 0px;
width: 100%;
text-align: center;
}
这是因为，您为
.footer.push.push.pushpush <div class="push"></div>
.footer填充底部：4em用于
。这里的4em
是因为是作为的高度给出的。页脚也是4em
。它将防止内容隐藏在.footer
后面
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
您还可以为外观和感觉提供一些填充顶部。这是因为，您为.footer
&.push
提供了相同的CSS样式，而元素.push
存在于其他容器中。因此，当内容较少时，它是分裂的
要删除拆分，请执行以下操作：
要么删除.push
元素，要么删除push
<div id="wrapper">
<div id="push"></div>
</div>
<footer></footer>
*{
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;
}