Question

我希望能够将页脚放在页面底部。看起来这应该通过以下代码自动发生：

<head>
    <meta charset="utf-8">
    <!-- other meta tags -->
</head>

<body>
    <header class="site">
        <sitename>Sitename</sitename>
        <slogan>my slogan</slogan>
    </header>

    <!-- the table which will be off to the side of the article/content-->
    <nav>
        <ul class="menu">
            <li><a href="Pages/menu1Element.html">menu1</a></li>
            <li><a href="Pages/menu2Element.html">menu2</a></li>
        </ul>
    </nav>

    <!-- the main body of the site. -->
    <article>

        <h2>What we are all about</h2>
        <p>
            Intro Statements
        </p>

        <!-- Current Headlines Section
        **********************************************************-->
        <h2>Headlines</h2>

        <ul>
            <li>
                <h4>The Grand Opening!</h4>

                <em>Welcome!</em> This is the grand opening!
            </li>

            <li>
                <h4>Looking for Contributors</h4>
                <p>
                    Let's make a site!
                </p>
            </li>
        </ul>
    </article>

    <footer class="site">
        <h3>Footer Content</h3>
    </footer>

</body>

问题是<footer>标记下的所有内容都显示在<article>中列出的内容中间。我试图在<footer>上使用定位属性，但这些都会产生不良结果。我希望这是一个普通的页脚，仅当用户滚动到页面底部时才会出现。除了制作<header>标记的所有<article>，<footer>和<div>标记类之外，还有其他方法吗？

编辑：我的CSS

/**** CSS3 ****/

/* CSS Simple Reset
--------------------------------------------------------*/
*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
}

/* Layout
--------------------------------------------------------*/

html {

}

body {
    background: -moz-repeating-linear-gradient(60deg, white, rgb(210, 210, 210) 0.125%, rgb(210, 210, 210) 0.615%, white 0.725%, white 0.975%);
    background: -ms-repeating-linear-gradient(60deg, white, rgb(210, 210, 210) 0.125%, rgb(210, 210, 210) 0.615%, white 0.725%, white 0.975%);
    background: -o-repeating-linear-gradient(60deg, white, rgb(210, 210, 210) 0.125%, rgb(210, 210, 210) 0.615%, white 0.725%, white 0.975%);
    background: -webkit-repeating-linear-gradient(60deg, white, rgb(210, 210, 210) 0.125%, rgb(210, 210, 210) 0.615%, white 0.725%, white 0.975%);
    background: repeating-linear-gradient(60deg, white, rgb(210, 210, 210) 0.125%, rgb(210, 210, 210) 0.615%, white 0.725%, white 0.975%);

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.06);
}

article {
    width: 60%;
    left: 20%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    z-index: 1;
}

header, nav, footer {
    display: block; /*Sets HTML5 elements to block */
}

header {
    width: 60%;
    position: absolute;
    left: 20%;
    z-index: 3;
}

footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
    clear: both;
}

header.site, footer.site {
    clear: both;
    margin: 0 auto;
    background-color: rgb(91, 184, 255)
}

header.site sitename, header.site slogan {
    text-align: center;
    padding: 0;
    width: 100%;
    margin: 0;
}

nav {
    display: block;
    float: left;
    background-color: rgb(210, 210, 210);
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 1em;
    text-align: left;
}

li {
    background-repeat: no-repeat;
    background-position: 100% .4em;
    padding-right: .6em;
    margin: 1em 0;
}

Answer 1

基本前提是主体页面被拉伸到页面的100％。最小高度也是100％。

然后，页脚会被赋予以下规则：

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

Answer 2

如果您只是希望它像块元素一样，与div类似，而不是在CSS中指定：

footer { display: block; }

Answer 3

使用此代码

   <html>
        <head>
             <meta charset="utf-8">
             <!-- other meta tags -->
             <style type="text/css">
               html {
                         position: relative;
                         min-height: 100%;
                    }
               body {
                         /* Margin bottom by footer height */
                         margin-bottom: 60px;
                    }
               .footer {
                         position: absolute;
                         bottom: 0;
                         width: 100%;
                         /* Set the fixed height of the footer here */
                         height: 60px;
                         background-color: #f5f5f5;
                       }
              .container {
                            width: auto;
                            max-width: 680px;
                            padding: 0 15px;
                         }
              .container .text-muted {
                                       margin: 20px 0;
                                     }
        </style>
 </head>

 <body>
        <div class="container">
        <header class="site">
        <sitename>Sitename</sitename>
        <slogan>my slogan</slogan>
        </header>

         <!-- the table which will be off to the side of the article/content-->
           <nav>
              <ul class="menu">
                  <li><a href="Pages/menu1Element.html">menu1</a></li>
                  <li><a href="Pages/menu2Element.html">menu2</a></li>
             </ul>
          </nav>

           <!-- the main body of the site. -->
          <article>

              <h2>What we are all about</h2>
              <p>
                     Intro Statements
              </p>

               <!-- Current Headlines Section
                    **********************************************************-->
              <h2>Headlines</h2>

              <ul>
                 <li>
                  <h4>The Grand Opening!</h4>

                   <em>Welcome!</em> This is the grand opening!
                </li>

                <li>
                       <h4>Looking for Contributors</h4>
                       <p>
                              Let's make a site!
                       </p>
                </li>
            </ul>
         </article>
       </div>

       <!--footer-->
       <footer class="footer">
              <p>footer here</p>
        </footer>
   </body>
  </html>
 <!--If you don't want to use <div> element. then you can add class="container" to     "<nav>" and "<article>"-->

没有<div> </div>的HTML页脚放置

3 个答案: