Разрыв нижнего колонтитула - липкий нижний колонтитул?

У меня есть демо, чтобы проиллюстрировать мой вопрос.Разрыв нижнего колонтитула - липкий нижний колонтитул?

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

Удалить это:

.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

Единственный липкую колонтитула я когда-либо видел работает 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

Разрыв нижнего колонтитула - липкий нижний колонтитул?

ответ

Смежные вопросы