页脚下的差距 - 粘性页脚?

时间:2013-02-20 20:04:46

标签: css footer

我在这里有一个演示来说明我的问题。

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>

3 个答案:

答案 0 :(得分:2)

我见过的唯一粘性页脚是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; }

它与bootstrap http://getbootstrap.com/

使用的相同

答案 1 :(得分:2)

删除它:

.group::after {
  height: 0; }

答案 2 :(得分:1)

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

删除此height: 0;

豫ICP备18024241号-1