页脚后面的内容，但自动设置PX

-2

这就是我想要的东西：jsfiddle.net/zVLrb/ 来自：here 但我通过引导做，所以我不知道，要设置的高度，例如200像素但我们也承认aytomatically页脚后面的内容，但自动设置PX

感谢答案...

2016-09-21 Bbabis

是的，这是可能的，但你需要一些JavaScript。
作出这样获得页脚的height并将其设置为padding-bottom的<body>（或任何网页包装与position:relative您的布局可能有 - 通常是footer的直接母公司）的函数（.accomodateFooter()在下面的例子），所以你页面内容不会被页脚覆盖。
您需要在页面上运行此功能load & resize事件以及页脚DOMSubtreeModified。

概念证明：

jQuery(document).ready(function($) { 
 
    $.fn.accomodateFooter = function(){ 
 
    var footerHeight = $('footer').outerHeight(); 
 
    $(this).css({'padding-bottom':footerHeight+'px'}); 
 
    } 
 
    // adjust footer after it's html was modified 
 
    $('footer').on('DOMSubtreeModified', function(){ 
 
    $('body').accomodateFooter(); 
 
    }) 
 
    // adjust footer when page loaded or resized. ideally, debounced. 
 
    $(window).on('load resize', function(){ 
 
    $('body').accomodateFooter(); 
 
    }) 
 
    $('body').accomodateFooter(); 
 
    window.feedFooter = function() { 
 
    var f = $('footer'); 
 
    f.append($('<p />',{ 
 
     text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."})) 
 
    .append($('<hr />')); 
 
    } 
 
});

body { 
 
    min-height: 100vh; 
 
    position: relative; 
 
    padding-top: 54px; 
 
} 
 
footer { 
 
    background-color: rgba(0,0,0,.65); 
 
    color: white; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    padding: 1.5rem; 
 
    display: block; 
 
} 
 
footer hr { 
 
    border-top: 1px solid rgba(0,0,0,.42); 
 
    border-bottom: 1px solid rgba(255,255,255,.21); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> 
 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Navbar</a> 
 

 
     <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
 
     <ul class="navbar-nav mr-auto"> 
 
      <li class="nav-item active"> 
 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="#">Link</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link disabled" href="#">Disabled</a> 
 
      </li> 
 
      <li class="nav-item dropdown"> 
 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
 
      <div class="dropdown-menu" aria-labelledby="dropdown01"> 
 
       <a class="dropdown-item" href="#">Action</a> 
 
       <a class="dropdown-item" href="#">Another action</a> 
 
       <a class="dropdown-item" href="#">Something else here</a> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     <form class="form-inline my-2 my-lg-0"> 
 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
     </form> 
 
     </div> 
 
    </nav> 
 

 
    <div class="container"> 
 

 
     <div class="starter-template"> 
 
     <h1>Feed the footer - not a game (yet!)</h1> 
 
     <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><hr /><button class="btn btn-warning" onclick="window.feedFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.0.0</code> and Bootstrap <code>v4-alpha</code> but this is only a proof of concept. It will work on any version of Bootstrap. Cheers!</blockquote> 
 
     </div> 
 

 
    </div> 
 
<footer>I am a footer with dynamic content. 
 
    <hr />

来源

2016-09-22 05:52:41

页脚后面的内容，但自动设置PX

回答

相关问题