ブートストラップ、ジャンボトロン、スティッキーフッタ

Question

私はフロントページにジャンボトロンを持っています。私は粘着性のフッターを持っており、それは素晴らしい作品です。私がそれらをまとめるまで。ラップクラスはジャンボトロンを破壊しますが、それを取ってフッタを破壊します。コンテンツはそこのどこかの混乱で失われます。明らかに、ジャンボトロンでは、ジャンボトロンが底に押し込むので、フッタを底に固執する必要はありませんが、ジャンボトロンを持たない他のページには必要です。

また、誰かが固定フッターで回答しようとする前に、それは私が探しているものではありません。

jfiddle

---

html, body { 
      height: 100%; 
      margin: 0; 
     } 

     .wrap { 
      min-height: 100%; 
      width: 100%; 
     } 

     .footer { 
      position: absolute; 
      width: 100%; 
      margin-top:-150px; 
      height: 150px; 
      background: orange; 
     } 

     .jumbotron { 
      background-color: inherit; 
      position: relative; 
      height: 100%; 
     } 

     .container-full-bg { 
      width: 100%; 
      height: 100%; 
      max-width: 100%; 
      background-position: center; 
      background-size: cover; 
      background-color: red; 
     } 

      .container-full-bg .container, .container-full-bg .container .jumbotron { 
       height: 100%; 
       width: 100%; 
      } 

---

<div class="wrap"> 

     <div class="container-full-bg"> 
      <div class="container"> 
       <div class="jumbotron"> 
        <div class="row"> 
         <div class="col-sm-12">my jumbotron</div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        content<br/>content<br/>content<br/>content<br/> 
content<br/>content<br/>content<br/>content<br/>content<br/> 
       </div> 
      </div> 
     </div> 


    </div><!--/wrap--> 

    <div class="footer">my footer</div> 

Answer 1

ここで私は、私も私ドンかかわらず、することを決めたのWordpressを使用していますので、私は

...になってしまったものです私たちがトップページにいるかどうかを確認し、必要な場所に必要なスタイルシートとdivを追加してください：

がドキュメントの先頭にheader.phpに追加されました。我々は、フロントページ

<?php if(!is_front_page()){ 
    //wrap the content only if we're not on the front page. 
    //this is to push the sticky footer down. 
    echo '<div class="wrap">'; 
} 

?> 


... 

にいないのであれば、その後

<?php 
if(!is_front_page()) { 
    echo '<link rel="stylesheet" type="text/css" href="' 
    . get_template_directory_uri() . '/stickyfooter.css" />'; 
} ?> 


... 

は、私はラップを追加し、footer.phpに私は、実際のフッター

---

前に、ラップのdivを閉じますstickyfooter.css：

.wrap { 
    min-height: 100%; 
    width: 100%; 
    margin-bottom: -246px; 
} 

.wrap:after { 
    content: ""; 
    display: block; 
    height:246px; 
} 

.footer { 
    clear: both; 
    height: 246px; 
    margin-top: -246px; 
} 

それを持っています。レイアウトに応じて好みのコードをページに提供します。