0

我想让一个 div 位于另一个 div 的底部。我可以解决这个问题

bottom: 0px;
postion: fixed;

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

如果可以更容易地废弃第一个条件并且可以将内部 div 定位在内容下方，那么重要的部分是内容必须始终可见。

4

2 回答 2

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

（取自如何判断 DOM 元素是否在当前视口中可见？）

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

由于您没有包含任何代码（将来，请这样做）我将假设您的代码看起来像这样：

<div class="wrapper">
    (contents)

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

要将其粘贴.footer到. 但是，如果您将其属性更改为并将包装器更改为（所有元素的默认设置），页脚将改为粘在窗口底部。.wrapperposition: relativepositionfixedstatic

查看此示例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/

于 2013-10-10T12:51:35.560 回答
0

Try this:

HTML:

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

CSS:

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

and the 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;

If you're open to jQuery you can make the javascript more simple and compatible

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

EDIT: I modified the conditions a bit adding the vertical scroll value and top offset.

于 2013-10-10T13:11:38.570 回答