粘性页脚问题 - CSS
Posted
技术标签:
【中文标题】粘性页脚问题 - CSS【英文标题】：Sticky Footer Issue - CSS 【发布时间】：2014-07-27 19:52:53 【问题描述】：所以我完全了解关于“粘页脚”的问题数量，并且还在这里和网站上引用了许多关于粘页脚的不同问题。我已经从这个项目中创建了一个新的模板，它可以工作并且有关于粘性页脚如何操作的示例，无论是在包装器内部还是外部...... 但是，我似乎无法让它在我的解决方案中正常运行。
目前页脚似乎是“粘滞的”，但是在我的一个主页上，内容（图像和文本）似乎与页脚重叠，因为页脚没有被正确地推到底部。它似乎位于屏幕下方（意味着您必须稍微滚动才能看到页脚） - 但在此页面上，它位于该位置，不会被向下推，然后内容重叠。
我已经尝试了所有方法，在 html、BODY、WRAPPER、contentDiv 上 100% 删除，但基本上，一件事有效，另一件事坏了。 我之后的是，ContentDiv = 100%（向下推页脚）。所以我应该能够创建一个空白页面，页脚粘在底部，如果内容增加，它会向下推……简单吧？但是用这个撕掉我的头发：/ 因此，任何帮助都将不胜感激，因为我的截止日期很短。
Fiddle Demo
CSS
html
margin: 0px; padding: 0px; height:100%;
body
margin: 0px; padding: 0px; height: 100%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px;
/* margin: 0px; padding: 0px; height: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; */
p font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px;
h1 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px;
h2 margin:0px; padding:0px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
/* PAGE FORMATTING - START*/
span:hover /* text-decoration: underline; */
a:link, a:visted
ahover, a:active
.link_nav_header
padding:0px;
font-size:20px;
font-weight:bold;
color:#333333;
cursor:pointer;
.but_default
padding: 2px;
border: 1px solid #009900;
background-color: #33FF00;
/* background-color: #dddbdb; */ /* TWO COLOURS? */
.but_events-buybutton
padding:3px;
min-width:90%;
margin-bottom:5px;
color:#ffffff;
background-color:#378ec8;
.but_all
min-width:90%;
cursor: pointer;
margin: 2px;
/* HEADER - START */
.hdr_container
width:100%;
height:110px;
padding:0px;
margin:0px;
position:relative;
background-color:#0099ff;
color: #ffffff;
overflow: hidden;
#hdr_profile-icon
margin-top: 1%;
margin-right: 1%;
float: right;
background-color: inherit;
/* NEW NAVIGATION */
#nav
width: 100%;
padding: 0;
margin: 0 auto;
background-color: #333333;
position: absolute;
bottom: 0%;
#nav ul
list-style: none;
/* width: 800px;*/ /* REMOVE TO STRETCH NAV TO FULL WIDTH */
width: 100%;
margin: 0 auto;
padding: 0;
#nav li
float: left;
text-align: center;
#nav ul li
width: 11%; /* STRETCHES NAV TO FULL WIDTH */
#nav li a
padding: 8px 15px;
display: block;
text-decoration: none;
font-weight: bold;
color: white;
text-transform:uppercase
#nav li:first-child a
background: red;
width: 10px;
font-weight: normal;
#nav li a:hover
/* color: #c00; */
background-color: #0099ff;
#nav a:hover a:focus
/* color: #c00; */
background-color: red;
/* MAIN CONTENT - START */
#wrapper
clear: both;
/* margin: 0 auto; */
width: 100%;
height:100%;
min-height: 100%;
/* margin-bottom: -75px; */
z-index:10;
.contentDiv
clear: both;
width:65%;
min-width: 800px;
height:90%;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
/* z-index: -9999; */
/* TABLE - START */
.tbl_container-centered
width:100%;
height:100%;
min-height:100%;
/* padding-bottom: 20px; */
margin-left:auto;
margin-right:auto;
display:table;
overflow:auto;
/* margin-bottom: 75px; */
display: inline-table;
vertical-align: middle;
.tbl_containerpaneltext-centered
width:95%;
min-height:35%;
margin-left:auto;
margin-right:auto;
background-color:red;
.tbl_head-genericthread
min-height:3%;
max-height:3%;
text-align:center;
color:#ffffff;
background-color:#0099ff;
.tbl_events-head
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid;
text-align: left;
border-collapse: collapse;
.tbl_grid-events
background-color: #ffffff;
.tbl_pickseats-famtable
width:100%;
background-color:#e1e1e1;
table#tbl_events
height:100%;
min-height:100%;
border-collapse: collapse;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
.link_moreinfo
padding:0px;
font-size:14px;
font-weight:bold;
color:#0099ff;
cursor:pointer;
#event_row
height: 140px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
#basket2
background: red;
/* FOOTER CSS - START */
.footer_container
clear: both;
width:100%;
height:75px;
bottom:0;
background-color:#0099ff;
/* position:absolute; */
.footer_container, .wrapper:after
/* .push must be the same height as footer */
height: 75px;
.wrapper:after
content: "";
display: block;
.footer_global-bottom
width: 100%;
margin: auto;
padding-top: 20px;
text-align: center;
color: white;
background: #333333;
.footer_global-bottom a
color: white;
text-decoration: none;
/* ERROR HANDELING */
.error
background: #ef7474;
border: 1px solid #f5aca6;
text-align: center;
.success
background: #74e963;
border: 1px solid #59e836;
text-align: center;
.alerts_box
padding: 10px;
width: 250px;
position: absolute;
visibility: hidden;
font-size: 10px;
color:black;
.alerts
width: 275px;
z-index: 2;
padding-bottom: 40px;
【问题讨论】：
如果你能在 jsFiddle 中重新创建它会很有帮助，人们会发现这样更容易提供帮助 添加一个 z-index:10;到页脚样式 您好，感谢您的回复。然而，由于 ASP 和包含的各种功能，几乎不可能在 jsFiddle 中重新创建。会看看我能做什么。可悲的是，页脚上的 z-index 没有做任何事情。 > 如果我从#wrapper 中删除“高度：100%”，这可以解决我的问题，但会导致 contentDiv 不是 100%：/ 如果没有一些 html 和这个 css，很难看出到底出了什么问题 嗯，HTML。 ASP 等可能只是混淆的东西，但是，请参阅附件：HVEcommm.MASTER = codeshare.io/bH0lf events.aspx = codeshare.io/Wldgm 非常感谢 【参考方案1】：您是否考虑过使用这段代码：
.footer_container
position: fixed;
bottom: 0;
z-index: 100;
如果你想看到完整的内容，你可以像这样添加到包装器中：
margin-bottom: (footer-height)px;
或者使用 padding-bottom 代替 margin-bottom。
【讨论】：
您好，感谢您的回复。我不是真的在“固定”页脚之后。它需要根据向下推的 contentDiv 向下流动页面。但是，如果 contentDiv 中没有太多内容（很像固定页脚的样子），它应该默认位于可视窗口的底部。如果我从 BODY 或 WRAPPER 中删除 100%，它确实会跳到底部，但是如果我只有 3 个事件行，页脚会粘在 contentDiv 的底部，然后会爬上页面？ :// 你试过把.wrapper:after改成.wrapper:after content: ""; display: block; clear:both;吗？
position fixed 的作用是将元素相对于视口固定在底部
固定位置确实将页脚放在底部，但这不是我所追求的。我在位于底部的页脚之后（如果 contentDiv 中没有任何内容），并且当向 contentDiv 添加更多内容时，必须向下推页脚。称为“粘滞页脚” - 如此处所示：cssstickyfooter.com - 但是我的项目遇到问题并且无法让它工作：/【参考方案2】：
在您的#wrapper 规则集中将height:100% 更改为height:auto 并删除min-height:100%。
jsFiddle
#wrapper
clear: both;
width: 100%;
height:auto;
z-index:10;
我相信将高度设置为 100% 是将其设置为浏览器窗口的 100%，而不是内容的 100%。不过我可能错了。
这会将页脚放置在内容的末尾。在内容小于窗口高度的页面上，您可以包装页脚并为页脚包装器提供如下类：
.minContentFooter
position: absolute;
bottom: 0;
如果内容是动态加载的并且您不知道它是否会填满浏览器窗口，那么您将需要一些 javascript 来实现这两种方式 - 无论是在内容的底部还是在当内容很少时，窗口的底部。
【讨论】：
【参考方案3】：问题解决了，不是通过 CSS，而是通过 Javascript。 问题是由于页面从表格加载动态内容，它不知道 contentDiv 有多大，所以除了页脚不知道在哪里。
粘性页脚是通过设置 CSS % 高度来实现的，并且还使用 javascript 来帮助纠正没有内容的页面或具有动态加载内容的页面。 下面的代码解释了活动的 javascript：
var totalHeight = $('#header').height() + $(id).height();
var contentDivHeight = $('#content').height();
var wrap = $('#wrapper');
if (totalHeight >= contentDivHeight)
wrap.removeClass('wrapper-height');
wrap.addClass('wrapper-minHeight');
else
wrap.addClass('wrapper-height');
wrap.removeClass('wrapper-minHeight');
代码检查页眉的高度和内容中包含的内容，如果它在页脚上方切换到一个 css 类，强制最小高度而不是高度，以允许页脚流动到内容的末尾。
非常感谢大家的帮助。【讨论】：
以上是关于粘性页脚问题 - CSS的主要内容，如果未能解决你的问题，请参考以下文章