Question

我已经想出如何将页脚保持在我正在尝试开发的网站的其他页面的底部。但我无法弄清楚如何在我的页面上用照片库做到这一点。页脚停留在页面中间。：（

以下是该页面的HTML代码：

html {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  color: #FF6347;
  font-family: 'Ceviche One', cursive;
  font-size: 2em;
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  margin: 0;
  padding: 0;
  min-height: 100%;
  position:relative;
}
#footer {
  background-color: #E9967A;
  color: black;
  margin: 0;
  padding: 0 30px;
  height: 50px;
  width: 100%;
  position: absolute;
  bottom:0;
}
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
#gallery li {
  float: left;
  height: auto;
  width: 45%;
  margin: 2.5%;
  background-color: #FFEBCD;
  color: #FF6347;
  }

<body>
    <div id="wrapper">
        <p class="sectionheader">Beautiful Places in Tyria</p>
        <ul id="gallery">
           <li><p class="captionheader">Garden of Dawn</p>
           <a href="img/treehouse Garden of Dawn.jpg">
             <img src="img/treehouse Garden of Dawn.jpg" alt="">
           </a>
           </li>
           <li><p class="captionheader">The Planetarium</p>
           <a href="img/treehouse The Planetarium.jpg">
             <img src="img/treehouse The Planetarium.jpg" alt="">
           </a>
           </li>
           <li><p class="captionheader">Wizard's Fief</p>
           <a href="img/treehouse Wizard's Fief.jpg">
             <img src="img/treehouse Wizard's Fief.jpg" alt="">
           </a></li>
           <li><p class="captionheader">Black Citadel Statues</p>
           <a href="img/treehouse Black Citadel Statues.jpg">
             <img src="img/treehouse Black Citadel Statues.jpg" alt="">
           </a></li>
           <li><p class="captionheader">Shrine of the Six</p>
           <a href="img/treehouse Shrine of the Six.jpg">
             <img src="img/treehouse Shrine of the Six.jpg" alt="">
           </a></li>
         </ul>
       <div id="footer">
        <a href="http://facebook.com/rejisama">
          <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
        </a>
        <a href="http://twitter.com/nogoodreji">
           <img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
        </a>
        <p>&copy; 2016 All rights reserved.</p>
       </div>
    </div>
  </body>

Answer 1

＆＃13;

html {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  color: #FF6347;
  font-family: 'Ceviche One', cursive;
  font-size: 2em;
  margin: 0;
  padding: 0;
}
.content{
  width:100%;
  display:block;
  }
#wrapper {
  margin: 0;
  padding: 0;
  width:100%;
  display: block;
}
.content{
  display: block;
}
#footer {
  background-color: #E9967A;
  color: black;
  margin: 0;
  padding: 0 30px;
  height: 50px;
  width: 100%;
  display:block;
  
}
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
  width:100%;

}
#gallery li {
  display: inline-block;
  height: auto;
  width: 40%;
  margin: 2.5%;
  background-color: #FFEBCD;
  color: #FF6347;
  }

＆＃13;

<body>
    <div id="wrapper">
    <div class="content">
        <p class="sectionheader">Beautiful Places in Tyria</p>
        <ul id="gallery">
           <li><p class="captionheader">Garden of Dawn</p>
           <a href="img/treehouse Garden of Dawn.jpg">
             <img src="img/treehouse Garden of Dawn.jpg" alt="">
           </a>
           </li>
           <li><p class="captionheader">The Planetarium</p>
           <a href="img/treehouse The Planetarium.jpg">
             <img src="img/treehouse The Planetarium.jpg" alt="">
           </a>
           </li>
           <li><p class="captionheader">Wizard's Fief</p>
           <a href="img/treehouse Wizard's Fief.jpg">
             <img src="img/treehouse Wizard's Fief.jpg" alt="">
           </a></li>
           <li><p class="captionheader">Black Citadel Statues</p>
           <a href="img/treehouse Black Citadel Statues.jpg">
             <img src="img/treehouse Black Citadel Statues.jpg" alt="">
           </a></li>
           <li><p class="captionheader">Shrine of the Six</p>
           <a href="img/treehouse Shrine of the Six.jpg">
             <img src="img/treehouse Shrine of the Six.jpg" alt="">
           </a></li>
         </ul>
       </div>
       </div>
       <div id="footer">
        <a href="http://facebook.com/rejisama">
          <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
        </a>
        <a href="http://twitter.com/nogoodreji">
           <img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
        </a>
        <p>&copy; 2016 All rights reserved.</p>
       </div>
    
   
  </body>

＆＃13;

Answer 2

我发现如果你让ul#gallery具有display:inline-block;的属性，它会给图库增加一个物理高度（因为目前我的浏览器显示高度为零）并将页脚推到底部。

如何将页脚保持在我的图片库下方

2 个答案: