0

我只是对页脚进行一些快速更改。

页脚需要粘性,我按照A List Apart方法描述的方法尝试让页脚保持在底部,但它似乎有点偏离。

html, body {
height: 100%;
 }
#container {
position: relative;
min-height: 100%;
}

<div id="container">
    <div id="content">...</div>
    <div id="footer">...</div>
</div>
4

2 回答 2

2

我总是使用CSSStickyFooter 方法

  • HTML,一个基本的骨架

    <div id="wrap">
    
        <div id="main">
    
        </div>
    
    </div>
    
    <div id="footer">
    
    </div>          
    
  • CSS,这只是一个片段

    * {margin:0;padding:0;} 
    
    html, body {height: 100%;}
    
    #wrap {min-height: 100%;}
    
    #main {overflow:auto;
        padding-bottom: 180px;}  /* must be same height as the footer */
    
    #footer {position: relative;
        margin-top: -180px; /* negative value of footer height */
        height: 180px;
        clear:both;} 
    
于 2013-02-14T14:54:51.893 回答
0

我认为你应该添加到#wrapper clearfix,在这种情况下将 height: 100% 添加到#wrapper 和#container,你会看到页脚低于应该的值。现在你应该将顶部设置为页脚的负高度,它应该可以工作。Bo 我不知道它是否会涵盖包装器的内容。

于 2013-02-14T15:39:59.043 回答