Question

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

感谢答案......

Answer 1

是的，这是可能的，但你需要一些JavaScript 创建一个函数（在下面的示例中为.accomodateFooter()），获取页脚的height并将其设置为padding-bottom <body>（或{{1}的任何页面包装器您的布局可能具有 - 通常是position:relative的直接父级），因此页面内容不会被页脚覆盖。
您需要在第footer页上运行此功能。 load个事件以及页脚resize。

概念证明：

＆＃13;

DOMSubtreeModified

＆＃13;

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 />'));
  }
});

＆＃13;

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

＆＃13;

内容后面的页脚但是自动设置px

1 个答案: