フッターを作成しましたが、オーバーラップボディです。これがイメージです。 フッターオーバーラップボディの固定スタイル
/*Start section links*/
.links .back-color {
background: #fafafa;
padding: 20px;
border-bottom: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
}
.links .line h2 {width: 196px}
.links .line ul {display: inline;padding-left: 30px;}
.links .line ul li {
display: inline-block;
padding: 0 5px;
border-right: 1px solid #d1d1d1;
line-height: 32px;
}
.links .line ul li.last {border-right: none}
.links .line h2 {
width: 196px;
height: 33px;
text-transform: uppercase;
font-size: 99%;
min-width: 120px;
padding-left: 20px;
float: left;margin: 0 20px 1px 0;
position: relative;
color: #fff;
}
.links .line h2:before {
content: '';
display: block;
position: absolute;
right: -24px;
width: 0px;
height: 0px;
border-top: 19px solid transparent;
border-bottom: 14px solid transparent;
border-left: 24px solid #fe9c00;
}
.links .line .title1 {background: #0050A0 }
.links .line .title2 {background: #0050A0; }
.links .line .title2:before {border-left: 24px solid #0050A0;}
.footer {padding: 22px 0 20px 0;}
.footer .designed-by a {
text-decoration: none;
font-weight: 400 !important;
line-height: 22px;
}
<footer>
\t <!-- Start section about-->
\t <section class="footer-body">
\t \t <section class="links">
\t \t \t <div class="container-fluid">
\t \t \t \t <div class="back-color">
\t \t \t \t \t <div class="row">
\t \t \t \t \t \t <div class="col-md-4">
\t \t \t \t \t \t \t <div class="line">
\t \t \t \t \t \t \t \t <h2 class="title2">
\t \t \t \t \t \t \t \t <span>Our mission</span>
\t \t \t \t \t \t \t \t </h2>
\t \t \t \t \t \t \t \t <ul class="list-unstyled">
\t \t \t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t \t \t <p>Our mission is to provide buyers a platform to find their desired products amongst various shops. And to provide a platform to shop owners to manage their shops and inventory without any hassle.</p></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="col-md-4">
\t \t \t \t \t \t \t <div class="line">
\t \t \t \t \t \t \t \t <h2 class="title2">
\t \t \t \t \t \t \t \t <span>Information </span>
\t \t \t \t \t \t \t \t </h2>
\t \t \t \t \t \t \t \t <ul class="list-unstyled">
\t \t \t \t \t \t \t \t \t <br />
\t \t \t \t \t \t \t \t \t <br />
\t \t \t \t \t \t \t \t \t <li><a href="#">about us</a></li>
\t \t \t \t \t \t \t \t \t <li><a href="#">our team</a></li>
\t \t \t \t \t \t \t \t \t <li><a href="#">contact us</a></li>
\t \t \t \t \t \t \t \t \t <br />
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="col-md-2">
\t \t \t \t \t \t \t <div class="line">
\t \t \t \t \t \t \t \t <h2 class="title2">
\t \t \t \t \t \t \t \t <span>Request </span>
\t \t \t \t \t \t \t \t </h2>
\t \t \t \t \t \t \t \t <ul class="list-unstyled">
\t \t \t \t \t \t \t \t \t <br />
\t \t \t \t \t \t \t \t \t <br />
\t \t \t \t \t \t \t \t \t <li><a href="#">report</a></li>
\t \t \t \t \t \t \t \t \t <li><a href="#">request a feature</a></li>
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </section>
\t </section>
\t <!-- End section about-->
</footer>
私はposition: fixed
を追加しようとしましたが、それはうまくいきませんでした。誰でもページの下部にフッターを修正する方法を教えてください。私はボディがどれくらい長くても構いませんが、フッタはいつも同じで底にとどまるでしょうか?