フッターしかし、自動的に設定PX

-2

これは私が欲しいものであるhere しかし、私は、ブートストラップでそれを行うので、私は知っている-希望をしていない例200pxのためとして、高さを設定しますしかし、答えをaytomaticallyフッターしかし、自動的に設定PX

感謝...

2016-09-21 Bbabis

を認識はい、それは可能ですが、あなたには、いくつかのJavaScriptを必要とします。
フッターのheightを取得し、（position:relativeでどんなページラッパーあなたのレイアウトが持っているかもしれませんか - footerの通常の直接の親を）<body>ためpadding-bottomとしてそれを設定する関数（以下の例では.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

答えて

関連する問題