如何删除HTML5中粘滞页脚下的空格？

我正在为响应式网站工作并使用twitter引导程序。我无法在我的网站中修复页脚。搜索了很多网站找到的解决方案，但它不适用于我的特定页面。无法追查问题。请检查code here jsdiddle.。我不希望脚下有任何空间。谢谢你。如何删除HTML5中粘滞页脚下的空格？

//css 
html, body { 
    height: 100%; 
      margin: 0pt; 
} 

#wrap { 
    min-height: 100%; 
    height: auto; 
    margin: 0 auto -60px; 
    padding: 0 0 60px; 
} 


#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
}

enter image description here

来源

2014-01-10 madhu kumar

这也许是可以解决你的问题：

#wrap { 
    min-height: 100%; 
    height: auto; 
    margin: 0 auto; 
    padding: 0; 
}

来源

2014-01-10 14:19:31 ucon89

遗憾的。仍然没有变化。 –

那么这空间是存在的，因为你有-60px保证金

margin: 0 auto -60px;

来源

2014-01-10 14:19:45

这是为了反作用'padding：0 0 60px;'......它使div伸展到全部空间的共同想法！ :) – NoobEditor

显示：块; ：D –

底部空间仍然没有变化。 –

这是什么你正在寻找：http://ryanfait.com/html5-sticky-footer/

来源

2014-01-10 14:24:08 kirkas

我试过这样的样品。还测试了twitter bootstrap示例页面。他们都运行良好，但没有在我的页面工作。 –

取代“margin：0pt;”按“保证金：0” – kirkas

您的HTML结构不正确。

页脚DIV必须是外面包裹

HTML

<div id="wrap"> 

    <div class="container-fluid" style="padding-top:1%; padding-bottom: 1%;"> 
     <div class="row-fluid"> 
      <div class="span12 largecircle"> 

      </div>  
     </div> 
    </div> 


</div> 

<div id="footer">  
    <div class="container-fluid" style=" background-color:#cccccc; position: absolute; opacity:0.7;"> 
     <div class="row-fluid"> 
      <h1>Sticky </h1> 
     </div> 
     <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>  
     <p>Use if need be, too.</p> 
    </div> 
</div>

JSFiddle Demo

来源

2014-01-10 15:19:14

谢谢你的解决方案。在jsfiddle它工作正常，但我需要采取内部包装页脚。可能吗？ –

为什么页脚需要放在包装内？这应该没有区别。 –

如何删除HTML5中粘滞页脚下的空格？

回答

相关问题