Bootstrap, Jumbotron und Sticky Footer

Question

Ich habe ein Jumbotron auf meiner Titelseite, und es funktioniert super. Ich habe eine klebrige Fußzeile, und es funktioniert auch gut. Bis ich sie zusammengesetzt habe. Die Wrap-Klasse ruiniert den Jumbotron, aber wenn man ihn herausnimmt, ruiniert er die Fußzeile. Der Inhalt geht auch dort irgendwo verloren. Offensichtlich brauche ich mit dem Jumbotron technisch nicht die Fußzeile, um auf dem Boden zu bleiben, da der Jumbotron es nach unten schieben wird, aber ich brauche es für die anderen Seiten, die das Jumbotron nicht haben.

Bevor jemand versucht, mit einer festen Fußzeile zu antworten, das ist überhaupt nicht das, wonach ich suche.

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

Hier ist, was ich mit ...

endete Da ich Wordpress bin mit entschied ich mich, obwohl ich don möchte nicht, überprüfen Sie, ob wir auf der ersten Seite sind oder nicht, und fügen Sie die erforderlichen Stylesheets und divs hinzu:

zu header.php im Kopf des Dokuments hinzugefügt.

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


... 

dann füge ich einpacken, wenn wir nicht auf der Titelseite

<?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">'; 
} 

?> 


... 

und in footer.php sind schließe ich den Wrap div vor der eigentlichen Fußzeile

---

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; 
} 

Also da y Du hast es. Ich gebe die Seiten mit dem Code, den sie bevorzugen, abhängig von ihrem Layout.