Question

我希望div位于另一个div的底部。我只能用

解决这个问题

bottom: 0px;
postion: fixed;

但是，如果包含的div大于窗口，我想将内部div冻结到窗口的底部。

如果更容易，第一个条件可以废弃，内部div可以放在内容下面，重要的是内容必须始终可见。

Answer 1

最好的解决方案是使用JavaScript检测页脚是否在视口内可见。如果没有，你应该改变它的样式以坚持窗口的底部而不是包含div的样式。

您可以使用此功能查看它是否在视口中：

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

（摘自How to tell if a DOM element is visible in the current viewport?）

现在，每次滚动或调整页面大小时，都可以执行运行该功能的检查。基于此，您可以决定设置一个类或更改将执行您要查找的CSS属性。

由于您未包含任何代码（将来，请执行）我将假设您的代码如下所示：

<div class="wrapper">
    (contents)

    <div class="footer">footer</div>
</div>

要将.footer粘贴到.wrapper的底部，它必须有一个'positon：absolute'，而包装器需要一个position: relative。但是，如果将position属性更改为fixed并将包装器更改为static（所有元素的默认值），则页脚将改为粘贴到窗口的底部。 / p>

查看此示例http://jsfiddle.net/GMYEh/

现在，使用上面的脚本，您可以分辨出它应该是哪一个。您必须在页脚的相同位置使用假元素，而不是页脚本身。这样，如果将页脚移动到窗口底部，仍可以测量包装器的底部是否在视口中。（如果您测量页脚本身并移动它，您将被卡住）。

执行此操作的脚本（在jQuery中）：

// add a fake footer after the wrapper
$('.wrapper').after($('<div class="fakefooter" />'));

$(document).on('resize scroll', function(e){
    //measure if the fake footer is in viewport
    if(elementInViewport($('.fakefooter')[0])) {
        // If so, it should be in the bottom of the wrapper. 
        $('.wrapper').css('position', 'relative');
        $('.footer').css('position', 'absolute');
    } else {
        // else it should be in the bottom of the window
        $('.wrapper').css('position', 'static');
        $('.footer').css('position', 'fixed');
    } 
});

工作示例： http://jsfiddle.net/GMYEh/4/

Answer 2

试试这个：

<强> HTML ：

<div id="wrapper">
    <div id="innerContent"></div>
</div>

<强> CSS ：

.fixedContent {
    position: fixed;
    bottom: 0;
}

和 javascript ：

var wrapper = document.getElementById('wrapper');
var content = document.getElementById('innerContent');
function position() {
    if (wrapper.offsetHeight + wrapper.offsetTop - content.offsetHeight - window.scrollY > window.innerHeight) {
        content.className += ' fixedContent';
    } else {
        content.className = content.className.replace('fixedContent', '');
    }
}

window.onload = position;
window.onresize = position;

如果你对 jQuery 持开放态度，你可以让javascript变得更加简单和兼容

var $wrapper = $('#wrapper');
var $content = $('#innerContent');
$(window).on('load resize', function() {
    $content.toggleClass('fixedContent', $wrapper.outerHeight(true)  $content.offset().top - $content.outerHeight(true) - $(document).scrollTop() > $(window).height());
});

修改：我稍微修改了条件，添加了垂直滚动值和顶部偏移量。

当内容将其推下时，保持div可见

2 个答案: