Bootstrap，jumbotron和粘脚

Question

我在我的首页上有一个jumbotron，它的效果很好。我有一个粘性的页脚，它也很好。直到我把它们放在一起。包裹类废墟jumbotron，但把它排除废墟页脚。内容也迷失在那里的混乱中。显然，对于超大号，我并不需要页脚坚持到底，因为超大号会将它推到底部，但是我需要它用于其他没有超大号的页面。

此外，在任何人尝试用固定页脚回答之前，这并不是我所期待的。

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()) { 
    echo '<link rel="stylesheet" type="text/css" href="' 
    . get_template_directory_uri() . '/stickyfooter.css" />'; 
} ?> 


... 

然后，我添加了包裹，如果我们不能在头版

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

?> 


... 

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

因此，有y你有它。我根据他们的布局提供他们喜欢的代码页面。