HTML：修复屏幕底部的页脚 [使用 Sharepoint Designer 2013]答案

【问题标题】：HTML: Fix footer at bottom of screen [using Sharepoint Designer 2013]HTML：修复屏幕底部的页脚 [使用 Sharepoint Designer 2013]
【发布时间】：2015-08-17 18:25:23
【问题描述】：

我坚持使用粘性页脚。

请注意，我希望页脚始终显示在屏幕底部，而不是页面。

如果重要的话，我正在使用 sharepoint Designer 2013 进行编码。

我使用的 CSS：

.wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -30px;
overflow: visible;
}
.footer, .push {
height: 30px;
clear: both;
}
.footer {
 background: #0072C6;
 color: #fff;
 line-height: 30px;
 text-align: center;
}
html,body  {
margin-bottom: -30px;
}

HTML 结构：

<form id="form1" runat="server">
<div class="wrapper">
</div>
<div class="footer">
<span>This is my SharePoint 2013 Footer</span></div>
</form>

页脚没有粘性。请问，谁能帮帮我？

提前致谢。如果您需要更多详细信息，请告诉我。

【问题讨论】：

使用position:fixed
嗨，阿米特。我按照 Neophyte 的回答进行了尝试。但是，问题是页脚现在实际上与屏幕底部的文本重叠。你能提供一些帮助吗？这是一个示例。 jsfiddle.net/Escape_Character/xzqqebdt/12
你应该使用 height 来实现这一点..

标签： html css sharepoint

【解决方案1】：

好吧，尝试将 position : fixed 和 bottom : 0 添加到您的 footer 标记中，它会停留在页面底部，请查看链接；

Fixed Footer

为了美观，你甚至可以添加width: 100%，这样可以增强GUI

【讨论】：

非常感谢。但是，页脚正在覆盖文本。那是包装器的 -30px 下边距不起作用。 jsfiddle.net/Escape_Character/xzqqebdt/12
页脚在文本上方？我不完全明白
嗨新手。请检查链接。当我在页面上添加大量文本时。页脚在底部是粘性的，但它与底部的文本重叠。基本上，由于页脚，我无法阅读最后 1-2 行文本。

【解决方案2】：

使用以下内容：

块引用

html, body {
	height: 100%;
	margin-bottom: -30px;
}
.wrapper {
	min-height: 100%;
	height: auto;
	margin: 0 auto -30px;
	overflow: visible;
}
#form{
    min-height: 100%;
    position: relative;
}
.footer, .push {
	height: 30px;
	clear: both;
}
.footer {
	background: #0072C6;
	color: #fff;
	line-height: 30px;
	text-align: center;
	position:absolute;
	bottom:0;
	width:100%;
}

<form id="form1" runat="server">
<div class="wrapper">
</div>
<div class="footer">
<span>This is my SharePoint 2013 Footer</span></div>
</form>

【讨论】：

嗨。我猜位置应该是位置：固定而不是绝对。