頁腳之間的差距 - 粘性頁腳？

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

頁腳之間的差距 - 粘性頁腳？

回答

相關問題