如何将页脚放在页面底部
Posted
技术标签:
【中文标题】如何将页脚放在页面底部【英文标题】:How to Put Footer at Bottom of Page 【发布时间】:2021-02-07 20:27:53 【问题描述】:我的页脚位于页面底部,直到我在它之前添加了几个 div。我不确定为什么这会抛出我的代码。我不想使用 position: fixed ,因为我希望它位于底部,但只有在向下滚动到时才能看到,例如此页面上的页脚。
.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>
【问题讨论】:
【参考方案1】:请不要使用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
,它将使定位和结构化 HTML 与 CSS 变得如此简单易懂。
请告诉我是否有任何帮助:)
【讨论】:
谢谢 - 这是非常棒的建议,尤其是关于 flexbox 的学习。 嘿,我已将flex-wrap:wrap
属性添加到 .gallery
容器中,以便图像可以按照您想要的两行很好地流动。再次运行 sn-p 相同。很高兴我能帮忙:)以上是关于如何将页脚放在页面底部的主要内容,如果未能解决你的问题,请参考以下文章