问题描述
我有一个产品画廊网站,将页脚放在页面底部时遇到很多问题。我的网站结构:
我有一个标题,然后在左侧部分有一个菜单过滤器,然后在右侧部分中有所有产品的图像库。
如果我将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€</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 · company@gmail.es</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;
}
解决方法
您有2种方法:
- 使用绝对定位,但是您必须在容器中添加等于页脚高度的边距
- 使用flexbox
Flexbox解决方案:
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€</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 · company@gmail.es</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>