我已经想出了如何将页脚放在我正在尝试开发的网站的其他页面的底部。但我不知道如何在我的照片库页面上做到这一点。页脚位于页面中间。 :(
这是该页面的 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>© 2016 All rights reserved.</p>
</div>
</div>
</body>最佳答案
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;
}<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>© 2016 All rights reserved.</p>
</div>
</body>关于html - 如何将页脚保留在我的图片库下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39942142/