如何将页脚放在页面底部

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 相同。很高兴我能帮忙:)

以上是关于如何将页脚放在页面底部的主要内容,如果未能解决你的问题,请参考以下文章

将页脚固定到页面底部

如何将页脚固定在页面底部

如何将页脚固定在页面底部

将页脚粘贴到页面底部的方法

即使页面半空,如何将页脚设置为底部? [复制]

即使内容不够大,也将页脚强制放在屏幕底部(不粘)