页脚后面的内容，但自动设置px [英] Footer behind content BUT set px automatically

问题描述

这就是我想要的：jsfiddle.net/zVLrb/
来自：此处
但是我通过bootstrap来做，所以我不知道 - 想要设置高度，例如200px，但是可以自动识别。

感谢您的答案。 ..

解决方案

是的，这是可能的，但是您需要一些JavaScript。

创建一个函数（ .accomodateFooter（）），它获取页脚的 height 并将其设置为 padding-bottom 为< body> （或者任何带有位置的页面封装：relative 您的布局可能有 - 通常是页脚的直接父项），所以页面内容不会被页脚覆盖。

您会需要在页面上运行此功能 load & 调整大小事件以及页脚 DOMSubtreeModified 。

证明的概念：

  jQuery（document）.ready（function（$）{ $ .fn.accomodateFooter = function（）{var footerHeight = $（'footer'）。outerHeight（）; $（this）.css（{'padding-bottom'：footerHeight +'px'}）;} //调整页脚（'DOMSubtreeModified'，function（）{$（'body'）。accomodateFooter（）;}）//当页面加载或调整大小时，调整页脚。理想情况下，debounced。$ （窗口）.on（'load resize'，function（）{$（'body'）。accomodateFooter（）;}）$（'body'）。accomodateFooter（）; window.feedFooter = function（）{var f = $（'footer'）; f.append（$（'< p />'，{text：人类让我注意喵喵叫太阳浴舔你的脸醒来在房子里徘徊，在你人类的床上跳起大量的噪音，再次入睡。扔在你的枕头太阳沐浴。狗在沙发上嗅到不好的跳跃，不停地喵喵叫，直到给予食物，整天小睡，然后在真空吸尘器中发出嘶嘶声。}））.append（$（'< hr />'））;}}）;     {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 =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0 .0-alpha.6 / css / bootstrap.min.cssintegrity =sha384-rwoIResjU2yc3z8GV / NPeZWAv56rSmLldC3R / AZzGRnGxQQKnKkoFVhFQhNUwEyJcrossorigin =anonymous>< script src =https://code.jquery.com/jquery -3.1.1.slim.min.jsintegrity =sha384-A7FZj7v + d / sdmMqp / nOQwliLvUsJfDHW + k9Omg / a / EheAdgtzNs3hpfag6 Ed950ncrossorigin =anonymous>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.jsintegrity = sha384-DztdAPBWPRXSA / 3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrbcrossorigin =anonymous>< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min .jsintegrity =sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk + 02D9phzyeVkE + jo0ieGizqPLForncrossorigin =anonymous>< / script>< nav class =navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse> < button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbarsExampleDefaultaria-controls =navbarsExampleDefaultaria-expanded =falsearia -label =切换导航> < span class =navbar-toggler-icon>< / span> < /按钮> < a class =navbar-brandhref =＃> Navbar< / a> < div class =collapse navbar-collapseid =navbarsExampleDefault> < ul class =navbar-nav mr-auto> < li class =nav-item active> < a class =nav-linkhref =＃>主页< span class =sr-only>（current）< / span>< / a> < /锂> < li class =nav-item> < a class =nav-linkhref =＃>链接< / a> < /锂> < li class =nav-item> < a class =nav-link disabledhref =＃>已停用< / a> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =http://example.comid =dropdown01data-toggle =dropdownaria-haspopup =truearia-expanded =false >下拉< / A> < div class =dropdown-menuaria-labelledby =dropdown01> < a class =dropdown-itemhref =＃>动作< / a> < a class =dropdown-itemhref =＃>另一个动作< / a> < a class =dropdown-itemhref =＃>此处还有其他内容< / a> < / DIV> < /锂> < / UL> < form class =form-inline my-2 my-lg-0> < input class =form-control mr-sm-2type =textplaceholder =Search> < button class =btn btn-outline-success my-2 my-sm-0type =submit> Search< / button> < /形式> < / DIV> < / NAV> < div class =container> < div class =starter-template> < h1>提供页脚 - 不是游戏（还是！）< / h1> < p class =lead>您会注意到身体底部填充正在增长以适应页脚的高度（因此页面内容不会被页面内容覆盖）。< / p>< hr />< button class =btn btn-warningonclick =window.feedFooter（）> Feed the footer< / button>< hr />< blockquote class =lead><< ，强>注意：< /强>我使用了jQuery< code> v3.0.0< / code>和Bootstrap< code> v4-alpha< / code>但这只是一个概念证明。它将适用于任何版本的Bootstrap。干杯<！/ BLOCKQUOTE> < / DIV> < / div>< footer>我是动态内容的页脚。 < hr />  

This is what I want: jsfiddle.net/zVLrb/ from: here But I do it by bootstrap, so I don't know-want to set the height as for example 200px but recognize aytomatically

Thank for the answers...

解决方案

Yes, it's possible, but you need some JavaScript.
Make a function (.accomodateFooter() in the example below) that gets the height of the footer and sets it as padding-bottom for the <body> (or whatever page wrapper with position:relative your layout might have - usually the direct parent of the footer), so your page contents do not get covered by the footer.
You will need to run this function on page load & resize events and also on footer DOMSubtreeModified.

Proof of concept:

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 />

这篇关于页脚后面的内容，但自动设置px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！