2017-05-12 4 views
1

フッターを作成しましたが、オーバーラップボディです。これがイメージです。 enter image description hereフッターオーバーラップボディの固定スタイル

/*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を追加しようとしましたが、それはうまくいきませんでした。誰でもページの下部にフッターを修正する方法を教えてください。私はボディがどれくらい長くても構いませんが、フッタはいつも同じで底にとどまるでしょうか?

答えて

1

あり一つは、あなたが位置とともに、コードの別の行を追加する必要があり、あなたがそれを行うことができる2つのオプションがあります代わりに、

0

あなたはそれがそれに


追加をoverlabないように、あなたのページのコンテンツはdivの内側にラップしていることを確認し、フッターmargin-topを与えるこの

.footer{ 
    position:relative; 
    bottom:0px;//Or different value to stick in the bottom 
} 

または ような何かを試してみました。この問題は、ページのコンテンツの位置属性のために発生する可能性がありますので、別のdivに保管しておいてください。

.footer { 
position:fixed; 
bottom:0; 
} 

、固定次のように、uはにフッターをしたい場合は、2番目の1は、次のとおりです。

1

footerhtml tagであり、あなたが実際に宣言されていないstylingためclassとしてそれを使用している..あなたがあなたのコンテンツにいくつかの最小の高さを設定する必要があり、コンテンツの後に下を移動tagと使用としてのスタイルpositionとしてfixedに沿って、bottomとしてzeroとし、ページの下部にフッターを下に揃えるには、

footer{ 
    padding: 22px 0 20px 0; 
    background:red; 
    position:fixed; 
    bottom:0; 
} 
関連する問題