html - 页脚与内容重叠

Question

我有一个产品库网站，但在将页脚放在页面底部时遇到了很多问题。我的网站结构：

我有一个标题，然后在左侧我有一个菜单过滤器，然后在右侧我有所有产品的图片库。

如果我用 position: relative 定义页脚，页脚不会放在页面底部。

如果我将 positon:absolute 页脚放置在页面底部，然后与页面内容一起折叠。

我该如何解决？

<div class="generalPage">
    <section>
        <header id="includeHeader"></header>
        <div id="divContent" class="wrapper-gallery">
            <div class="row noPaddingRow">
               <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                  <ul id="menuFiltre2" class="menuFiltre">
                     <li class="familiaMenuNom" onclick="changeFamilia()"><a href="#" class="leftmenu">Veure tot</a></li>
                     <li class="familiaMenuNom" onclick="changeFamilia(8)"><a href="#" class="leftmenu">Clothing</a></li>
                     <li class="familiaMenuNom" onclick="changeFamilia(6)"><a href="#" class="leftmenu">Jewelley</a></li>
                     <li class="familiaMenuNom" onclick="changeFamilia(7)"><a href="#" class="leftmenu">Books</a></li>
                     <li class="familiaMenuNom" onclick="changeFamilia(4)"><a href="#" class="leftmenu">Souvenirs</a></li>
                  </ul>
               </div>
               <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                  <div id="p-flex">
                     <div class="p-flex">
                        <div class="p-flex-in">
                           <a href="#" class="leftmenu">
                              <img onerror="this.src=" ..="" images="" img_arti.jpg""="" alt="t-shirt" class="p-img" src="../loadImg.jsp?codeItem=1" onclick="continueItem(1)">
                              <div class="title-article">Tshirt london</div>
                              <div class="price-article">8.12€&lt;/div>
                           </a>
                        </div>
                     </div>
                  </div>
               </div>
               <footer id="includeFooter">
                  <div class="row" style="background-color:#FFF;">
                     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 redesSocialesPieImg"></div>
                     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 redesSocialesPie"></div>
                  </div>
                  <div class="row" style="background-color:#FFF;">
                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="footerAdreca">Oxford Street, 10 London · [e-mail]</div>
                  </div>
                  <div class="row" id="peuCopyright">
                     <div class="col-xs-8 col-sm-8 col-md-6 col-lg-6">
                        <div id="copyright"><span>© 2020. All rights reserved. SHOP COMPANY</span></div>
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-6 col-lg-6">
                        <div id="logo-footer"></div>
                     </div>
                  </div>
               </footer>
            </div>
        </div>
    </section>
</div>

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #F5F5F5;
}
.wrapper-gallery{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
    margin-bottom: 60px;
}

标签： htmlcssjspfooterbottom

Answer 1

你有两种方法：

• 使用绝对定位，但您必须在容器中添加与页脚高度相等的边距
• 使用弹性盒

弹性盒解决方案：

html, body, .generalPage, section, .wrapper-gallery {
  height: 100%;
}
.wrapper-gallery {
    display: flex;
  flex-direction: column;
justify-content: space-between;
}

footer {

    width: 100%;
    background-color: #F5F5F5;
}
.wrapper-gallery{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
    margin-bottom: 60px;
}

<div class="generalPage">
    <section>
        <header id="includeHeader"></header>
        <div id="divContent" class="wrapper-gallery">
            <div class="row noPaddingRow">
               <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                  <ul id="menuFiltre2" class="menuFiltre">
                     <li class="familiaMenuNom" onclick="changeFamilia()"><a href="#" class="leftmenu">Veure tot</a></li>
                     <li class="familiaMenuNom" onclick="changeFamilia(8)"><a href="#" class="leftmenu">Clothing</a></li>
                     <li class="familiaMenuNom" onclick="changeFamilia(6)"><a href="#" class="leftmenu">Jewelley</a></li>
                     <li class="familiaMenuNom" onclick="changeFamilia(7)"><a href="#" class="leftmenu">Books</a></li>
                     <li class="familiaMenuNom" onclick="changeFamilia(4)"><a href="#" class="leftmenu">Souvenirs</a></li>
                  </ul>
               </div>
               <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
                  <div id="p-flex">
                     <div class="p-flex">
                        <div class="p-flex-in">
                           <a href="#" class="leftmenu">
                              <img onerror="this.src=" ..="" images="" img_arti.jpg""="" alt="t-shirt" class="p-img" src="../loadImg.jsp?codeItem=1" onclick="continueItem(1)">
                              <div class="title-article">Tshirt london</div>
                              <div class="price-article">8.12€&lt;/div>
                           </a>
                        </div>
                     </div>
                  </div>
               </div>
             
            </div>
          <footer id="includeFooter">
                  <div class="row" style="background-color:#FFF;">
                     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 redesSocialesPieImg"></div>
                     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 redesSocialesPie"></div>
                  </div>
                  <div class="row" style="background-color:#FFF;">
                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="footerAdreca">Oxford Street, 10 London · [e-mail]</div>
                  </div>
                  <div class="row" id="peuCopyright">
                     <div class="col-xs-8 col-sm-8 col-md-6 col-lg-6">
                        <div id="copyright"><span>© 2020. All rights reserved. SHOP COMPANY</span></div>
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-6 col-lg-6">
                        <div id="logo-footer"></div>
                     </div>
                  </div>
               </footer>
        </div>
        
    </section>
</div>