HTML粘性页脚问题
尝试实施“粘性”页脚,但未按计划运行。它抛出它在底部,并在第一次滚动它按预期工作(除了它显示一个内部滚动条)。当向后滚动时,棒脚不立即消失,它需要几个卷轴,然后它似乎回到“底部”。所以我的问题是,我如何始终将页脚保持在底部并消除内部滚动条。我想知道我的绝对定位是否在主内容的内部存在问题。该div可以在高度上扩展。HTML粘性页脚问题
下面是代码:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
如果我从页面移除包裹自动溢出,页脚实际移动到我的网页,包装div的底部。所以看起来,因为我的绝对主要内容是绝对的,它正在扩展到我的包装之外呢?如果我在页面包装的高度上设置了一个固定值,页脚就会根据需要移动到底部。所以这是一个真正的问题,即使使用可扩展内容,我如何将页脚保留在页面底部?
进一步的研究表明,当我设置溢出隐藏在页面换行时,我的绝对内容“main-content-inner”被截断。不管它是什么,我如何让页面展开的高度扩展到主要内容的高度?
正如我回答here,您可以使用http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
这里你可以看到一个工作示例:http://jsfiddle.net/dZDUR/
调整右手 “结果” 窗格比文本 更短/更高来查看滚动条出现/消失。
根据CSS Sticky Footer how-to,您可以在
main
div内插入正常的 '列'布局。
我试过了,但即使我喜欢只有一条线在身体,我即使滚动条。 – Rajesh
试试这个:
重写你的HTML
这样的代码:
<div id="page-wrap">
<div id="main-content">
<div id="main-content-inner">
</div>
</div>
<div class="footerpush"></div>
<div id="footer">copyright info</div>
</div>
而且rewrit您CSS
文件样式属性:
html,body
{ height:100%;
padding:0;
margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;
}
#main-content {
background:#FF0;
padding-bottom:40px;
}
#main-content-inner {
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {
text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}
.footerpush
{
position:absolute;
bottom:20px;
height:20px;
width:100%;
}
如果可以帮助您,请参阅http://ryanfait.com/sticky-footer/。 – newbie
该教程是我的代码基于的。我已经实施它(我认为)。我的可扩展内容(绝对)是否会导致问题? – spentak
请勿设置高度,并且内容有扩展能力。 – CBRRacer