html - 如何将页脚放在页面底部
问题描述
我的页脚位于页面底部,直到我在它之前添加了几个 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>
解决方案
请不要使用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 变得非常容易和易于理解。
请告诉我我是否有任何帮助:)
推荐阅读
- stata - 计数命令的使用
- apache-spark - 我有 56 列的表,想加载 46 列数据,我该怎么做?
- php - 如何使用 PhpMailer 在回复邮件中发送 gmail 线程 ID
- php - 安装库时找不到php composer类
- reactjs - 如何在图像滑块中使用系统图像而不是 React Native 中的链接
- c# - 如何在 Selenium 中打开新标签页
- php - Post 方法的 MethodNotAllowedHttpException .Get 和 Head 支持
- node.js - 无法在 hello.cc 中打开源文件“node.h”
- c++ - C++20 constexpr 容器将如何工作?
- django - Django查看单元测试与自定义模板标签冲突