HTML粘性页脚问题

问题描述:

尝试实施“粘性”页脚,但未按计划运行。它抛出它在底部,并在第一次滚动它按预期工作(除了它显示一个内部滚动条)。当向后滚动时,棒脚不立即消失,它需要几个卷轴,然后它似乎回到“底部”。所以我的问题是,我如何始终将页脚保持在底部并消除内部滚动条。我想知道我的绝对定位是否在主内容的内部存在问题。该div可以在高度上扩展。HTML粘性页脚问题

Problem Screenshot

下面是代码:

<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”被截断。不管它是什么,我如何让页面展开的高度扩展到主要内容的高度?

+0

如果可以帮助您,请参阅http://ryanfait.com/sticky-footer/。 – newbie

+0

该教程是我的代码基于的。我已经实施它(我认为)。我的可扩展内容(绝对)是否会导致问题? – spentak

+0

请勿设置高度,并且内容有扩展能力。 – CBRRacer

正如我回答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内插入正常的 '列'布局。

+0

我试过了,但即使我喜欢只有一条线在身体,我即使滚动条。 – 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/resources/footer-stick-to-bottom-of-page/