如何解决如何将页脚放在页面底部
我的页脚位于页面底部,直到在其之前添加了一些div。我不确定为什么这会抛出我的代码。我不想使用位置:固定,因为我希望它在底部,但是只有向下滚动到此页面的页脚时才能看到。
.gallerybox {
border: 4px solid rgba(54,215,183,1);
width:30%;
height:200px;
float:left;
margin-left:10px;
margin-bottom:10px;
}
#footer {
width:100%;
height:100px;
background-color:lightgray;
bottom:0;
left:0;
position:relative;
}
<div id="holder">
<div id="body">
<p id="gallery">The Gallery</p>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<br>
<div id="footer">FOOTER</div>
</div>
</div>
解决方法
请不要使用float
属性来放置多个div
。
使用display: flex
以尽可能最佳的方式实现相同目标。
我认为这就是您想要的
.container{
display:flex;
flex-direction:column;
}
.gallery{
display:flex;
flex-wrap:wrap;
}
.gallerybox {
border: 4px solid rgba(54,215,183,1);
width:30%;
height:200px;
margin-left:10px;
margin-bottom:10px;
}
#footer {
width:100%;
height:100px;
background-color:lightgray;
}
<div id="holder">
<p>The Gallery</p>
<div class="container">
<div class="gallery">
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
<div class="gallerybox"></div>
</div>
<div id="footer">FOOTER</div>
</div>
</div>
我已经添加了display: flex
属性,并删除了float: left
,这是造成问题的原因,并且还对HTML结构进行了一些细微的更改。
我建议您学习flexbox
,它将使使用CSS的定位和结构化 HTML变得如此容易和容易理解。
请告诉我我是否有帮助:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。