页脚之间的差距 - 粘性页脚？

http://www.ttmt.org.uk/forum/

这是一个标题，内容和页脚。内容将页脚推到窗口下方，但页脚仍然存在以下间隙。

为什么页脚下方有空隙？

我需要粘脚吗？

什么是响应式布局的最佳粘脚？

在此先感谢您的帮助。

<!DOCTYPE html> 
    <html> 
     <meta charset="UTF-8"> 
     <title>Title of the document</title> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="robots" content=""> 


     <style type="text/css"> 

     /* http://meyerweb.com/eric/tools/css/reset/ 
      v2.0b1 | 201101 
      NOTE: WORK IN PROGRESS 
      USE WITH CAUTION AND TEST WITH ABANDON */ 

     html, body, div, span, applet, object, iframe, 
     h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
     a, abbr, acronym, address, big, cite, code, 
     del, dfn, em, img, ins, kbd, q, s, samp, 
     small, strike, strong, sub, sup, tt, var, 
     b, u, i, center, 
     dl, dt, dd, ol, ul, li, 
     fieldset, form, label, legend, 
     table, caption, tbody, tfoot, thead, tr, th, td, 
     article, aside, canvas, details, figcaption, figure, 
     footer, header, hgroup, menu, nav, section, summary, 
     time, mark, audio, video { 
      margin: 0; 
      padding: 0; 
      border: 0; 
      outline: 0; 
      font-size: 100%; 
      font: inherit; 
      vertical-align: baseline; 
     } 
     /* HTML5 display-role reset for older browsers */ 
     article, aside, details, figcaption, figure, 
     footer, header, hgroup, menu, nav, section { 
      display: block; 
     } 
     body { 
      line-height: 1; 
     } 
     ol, ul { 
      list-style: none; 
     } 
     blockquote, q { 
      quotes: none; 
     } 
     blockquote:before, blockquote:after, 
     q:before, q:after { 
      content: ''; 
      content: none; 
     } 

     /* remember to define visible focus styles! 
     :focus { 
      outline: ?????; 
     } */ 

     /* remember to highlight inserts somehow! */ 
     ins { 
      text-decoration: none; 
     } 
     del { 
      text-decoration: line-through; 
     } 

     table { 
      border-collapse: collapse; 
      border-spacing: 0; 
     } 

     /* CLEAR FIX */ 

     .clear { 
      clear: both; 
     } 

     .group:after { 
      content: "."; 
       display: block; 
       height: 0; 
       clear: both; 
      visibility: hidden; 
     } 

     *html .group { 
      height:1%; 
     } 

     *:first-child+html .group { 
      min-height: 1px; 
     } 

     .clear { 
      clear:both; 
     } 

     /* END CLEAR FIX */ 


     body{ 
      font:1em Helvetica, sans-serif; 
     } 
     #page{ 
      max-width:1000px; 
      margin:0 auto; 
     } 

     header{ 
      background:blue; 
      height:100px; 
     } 

     .pageContent{ 
      padding:50px 0; 
      background:#eee; 
     } 

     footer{ 
      background:#b5b6b9; 
      width:1000px; 
      margin:0 auto; 
     } 

     footer ul{ 
      float:left; 
      margin:0 20px 0 0; 
     } 
     footer ul li:first-of-type a{ 
      text-transform:uppercase; 
      font-weight:bold; 
     } 
     footer a{ 
      display:inline-block; 
      color:white; 
      font-size:.8em; 
      padding:1px; 
     } 


     </style> 

     </head> 

    <body> 

     <div id="page"> 

      <header class="group"> 
      <h2>Header</h2> 
      </header> 

      <section class="pageContent"> 
       <h2>Content</h2> 
        <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
        <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

        <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

        <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
        <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
        <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

        <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

        <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

      </section> 


     <footer class="group"> 
     <h2>Footer</h2> 

      <ul> 
       <li><a href="#">One</a></li> 
      </ul> 

      <ul> 
       <li><a href="#">Two</a></li> 
       <li><a href="#">2-1</a></li> 
       <li><a href="#">2-2</a></li> 
       <li><a href="#">2-3</a></li> 
       <li><a href="#">2-4</a></li> 
      </ul> 

      <ul> 
       <li><a href="#">Three</a></li> 
       <li><a href="#">3-1</a></li> 
       <li><a href="#">3-2</a></li> 
       <li><a href="#">3-3</a></li> 
       <li><a href="#">3-4</a></li> 
       <li><a href="#">3-5</a></li> 
       <li><a href="#">3-6</a></li> 
      </ul> 

     </footer> 


    </body> 

    </html>

来源

2013-02-20 ttmt

第一件事是验证你的代码，并确保所有的标签都完全关闭。 – j08691 2013-02-20 20:09:32

删除此：

.group::after { 
    height: 0; }

来源

2013-02-20 20:14:04 powwowgang

.group::after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

删除此height: 0;

来源

2013-02-20 20:15:45

身高：0;是来自我已经使用了一段时间的明确修复，无法记住我在哪里得到它。清除修复程序是否需要高度：0; – ttmt 2013-02-20 21:40:09

我所见过的工作100％的时间只有粘页脚，是这样的一个：http://jsfiddle.net/DU3uf/

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title of the document</title> 
</head> 
<body> 
    <div id="wrapper"> 
     <header> 

     </header> 
     <section> 

     </section> 
     <div id="push"></div> 
    </div> 
    <footer> 

    </footer> 
</body> 
</html>

CSS

html, body { width:100%; height:100%; } 
#wrapper { width:100%; min-height:100%; height:auto; margin:0 auto -100px; } 
#wrapper > header { width:100%; height:100px; background-color:#333; } 
#wrapper > section { width:100%; height:400px; background-color:#FFF; } 
#push { width:100%; height:100px; clear:both; } 
footer { width:100%; height:100px; background-color:#1BA1E2; }

这是相同的使用引导http://getbootstrap.com/

来源

2013-02-20 20:30:17

页脚之间的差距 - 粘性页脚？

回答

相关问题