Question

由于某些原因，我的页脚不在页面底部，即使我指定它位于底部。这是一张照片，它位于页面中间的内容之上。我需要一些帮助，了解如何在页面底部制作页脚，而不是在我的图片/内容之上。

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>int222_162d16 - Assignment 2 - Home Page</title>
    <link rel="stylesheet" href="css/normalize.css"   type="text/css" media="screen" /> 
    <link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" /> 
  </head>
  <body>
    <nav class="fixed-nav-bar">
      <ul class="nav">
        <li class="nav"><a class="nav" href="../index.html">&spades; My Zenit Account</a></li>
        <li class="nav"><a class="nav" href="index.html">Home</a></li>
        <li class="nav"><a class="active" href="gallery.html">Gallery</a></li>
        <li class="nav"><a class="nav" href="video.html">Video</a></li>
        <li class="nav"><a class="nav" href="audio.html">Audio</a></li>
        <li class="nav"><a class="nav" href="table.html">Tables With CSS</a></li>
        <li class="nav"><a class="nav" href="pizza/index.html">Forms</a></li>
        <li class="nav"><a class="nav" href="css/sitecss.css">CSS Used</a></li>
        <li class="nav"><a class="nav" href="extra/index.html">Extra</a></li>
      </ul>
    </nav>
    <h1>Photo Gallery!</h1>

    <div>

        <aside class="r">
            <p class="c"><b><u>Four More Wonders of the World!</u></b></p>
            <table>
                <ol>

                    <li><a href="https://en.wikipedia.org/wiki/Great_Pyramid_of_Giza">The Great Pyramid of Giza</a></li>
                    <li><a href="http://geography.about.com/od/culturalgeography/ss/Seven-Wonders-Of-The-Modern-World.htm#step2">CN Tower</a></li>
                    <li><a href="http://geography.about.com/od/culturalgeography/ss/Seven-Wonders-Of-The-Modern-World.htm#step3">Empire State Building</a></li>
                    <li><a href="http://geography.about.com/od/culturalgeography/ss/Seven-Wonders-Of-The-Modern-World.htm#step4">Golden Gate Bridge</a></li>
                </ol>
            </table>

            <p class="c"><b><u>Social Media Links</u></b></p>

            <center>
                <aside style="position: relative; background: url('images/social-media.png') no-repeat; width: 250px; height: 140px;">
                    <a href="http://facebook.com" style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a> <!-- use this as a guide -->
                </aside>
            </center>

        </aside>

        <section class="s">
            <h3>Why Does A Country Need A Capital City?</h3>
            <p>Capital cities are usually known as the administrative centre of the country. They are usually the most populated city
            within the country, and the Government will usually have the capital city as the base. Representatives from other embassys 
            will be based off of the capital city, and same with the civil workers.</p>
        </section>

        <section class="s">
            <h3>China</h3>


            <figure>
              <figcaption>
                  The Great Wall of China
               </figcaption>
               <img src="images/The_Great_Wall_of_China_at_Jinshanling.jpg" alt="The Great Wall of China" title="The Great Wall of China" />
            </figure>
                The great wall is over twenty-three hundred years old, and it's official length is 21,196.18km. In the first week of may 
                and October there can be upwards of seventy-thousand people per day and in 2001 there were sixty-three million visiters in Badaling.
                The Great Wall was constructed due to the states of Qin, Wei, Zhao, Qi, and Zhongshan having a warring period.
        </section>

        <section class="s">
            <h3>Jordan</h3>


            <figure>
              <figcaption>
                  Petra
               </figcaption>
               <img src="images/rsz_377px-petra_jordan_bw_21.jpg" alt="Petra" title="Petra" />
            </figure>
                Petra is a archaeological city in southern Jordan. This historical city is known for it's rock-cut architecture and water conduit systems.
                Petra also is known as Raqmu to the Nabataeans or Rose City due to the color of the stones which are carved.
        </section>

        <section class="s">
            <h3>Italy</h3>


            <figure>
              <figcaption>
                  The Colosseum
               </figcaption>
               <img src="images/rsz_800px-colosseum_in_rome_italy_-_april_2007.jpg" alt="The Colosseum" title="The Colosseum" />
            </figure>
            The Colosseum is an oval amphitheatre in the centre of Rome, built of sand and concrete. It is known as the largest amphitheatre ever built. The Colosseum is situated east of the
                Roman Forum. The construction started in AD 72 and was completed in AD 80. It could hold an estimated fifty to eighty-thousand people.
        </section>

        <section class="s">
            <h3>Mexico</h3>


            <figure>
              <figcaption>
                  Chichen Itza
               </figcaption>
               <img src="images/Chichen-Itza-Castillo-Seen-From-EastJPG.jpg" alt="Chichen Itza" title="Chichen Itza" />
            </figure>
            Chichen Itza was known as a focal point in the northern Maya lowlands between six-hundred to twelve-hundred AD. The 10th century saw the rise of the city
            as a regional capital controlling the area from central Yucatan to the north coast.
        </section>

        <section class="s">
            <h3>Peru</h3>


            <figure>
              <figcaption>
                  Machu Picchu
               </figcaption>
               <img src="images/800px-Machu_Picchu_Peru.jpg" alt="Machu Picchu" title="Machu Picchu" />
            </figure>
                Machu Picchu is a Inca citadel situated on a mountain ridge 2430 meters above sea level. Archaeologists believe that Machu Picchu was built as an estate for their emperor, 
                Pachacuti. It is the most familiar icon of Inca civilization.
        </section>

        <section class="s">
            <h3>India</h3>


            <figure>
              <figcaption>
                  Taj Mahal
               </figcaption>
               <img src="images/rsz_728px-taj_mahal_in_march_2004.jpg" alt="Taj Mahal" title="Taj Mahal" />
            </figure>
                The Taj Mahal was to be built by the commission of Shah Jahan in 1631, so that he could build the Taj in the memory of his wife, Mumtaz Mahal,
                a princess who died giving birth to their 14th child. The construction began in 1632. The tomb is the centrepiece of a 42 acre complex, which includes a mosque and a guest house, and is also set in formal gardens
                bounded on three sides by a crenellated wall.
        </section>

        <section class="s">
            <h3>Brazil</h3>


            <figure>
              <figcaption>
                  Christ the Redeemer
               </figcaption>
               <img src="images/rsz_1_cristor_redentor_2014.jpg" alt="Christ the Redeemer" title="Christ the Redeemer" />
            </figure>
                The idea of building a statue atop Corcovado was suggested in the mid 1850's when a priest, Pedro Maria Boss suggested in placing a Christian monument to honour their princess,
                 Princess Isabel. The project however wasn't approved until 1889 when the country became a republic and the statue was manufactured alongside the Statue of Liberty. They had required donations to build the monument, 
                 and most donators were Brazilian Catholics.
        </section>

        </div>

        <footer class=f>
       <script>
          var dt=new Date(document.lastModified);   // Get document last modified date
          document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
       </script>
    </footer>
  </body>
</html>

CSS：

ul.nav
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
    border: 1px solid #e7e7e7;
    box-shadow: 5px 2px 10px #808080;
}

li.nav 
{
    float: left;
}

li a.nav 
{
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color on hover*/

li a:hover:not(.active) 
{
    background-color: #ddd;
}

li a.active
{
    display: block;
    color: #ffffff;
    background-color: #9999ff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

section.s /*shadow on sections*/
{
    background-color: #ccccff;
    box-shadow: 2px 2px 2px 1px #808080;
    width:78%;

}


aside.r 
{
  float: right;
  width: 20%;
  background-color: #ccccff;
  box-shadow: 2px 2px 2px 1px #808080;
}

p.c
{
    text-align: center;
    width: 100%;

}

footer.f
{
          bottom: 0;
          width: 100%;
          background:#ccccff;
          color:#000000;

          position:absolute;
          text-align:center; 
          font-weight:bold;
          display:inline-block;
          margin: 0px auto;
          line-height:20px;


          clear: both;
}

aside p 
{ 
    margin-top: 0 
}

body
{
    background-color: #9F9FFF;
}
html, body 
{
    max-width: 100%;
    /*overflow-x: hidden;*/
    margin:0;
}

figcaption
{
    font-size: 1em;
    border: 1px solid;
    margin:0 auto;
    text-align:center;
}
figure
{
    text-align: center;
}

Answer 1

滚动时

position: absolute;会移动页脚。

如果您希望页脚始终显示在屏幕底部，请将其更改为：

position: fixed;

如果您希望页脚停留在DOM的底部，请使用：

position: relative;

Answer 2

您必须将position: relative;添加到footer的父容器中（在本例中为body）。相关：Position Absolute and Bottom 0

Answer 3

这是解决方案！

请更改页脚位置以固定它将起作用

footer.f
{
   position: fixed;
   bottom: 0;
   width: 100%;
   background:#ccccff;
   color:#000000;
   text-align:center; 
   font-weight:bold;
   line-height:20px;
}

为什么我的页脚位于页面中间？

3 个答案: