如何将页脚放在页面底部

debugcn 发表于 Dev

弗朗西斯卡·里奥斯·杜尔金

我的页脚位于页面底部，直到我在其之前添加了一些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>

Tushar saxena

请切勿使用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变得如此容易和容易理解。

告诉我我是否有帮助:)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。