Question

我正在尝试创建一个始终延伸到页面底部的<div>。这里讨论了一个类似的问题：https://stackoverflow.com/questions/16821721/extend-div-to-bottom-of-page 但是，我想只使用div本身。我的方法是以下javascript代码（每次调整窗口大小时都会执行）：

var total_height = $( window ).height();
var container = $( "div#container:first" )[0];

var rect = container.getBoundingClientRect();

var remaining_height = total_height - rect.top;

container.style.height = "" + remaining_height + "px";

问题是高度不考虑填充/边距，因此div有点太大。我想设置高度，使offsetHeight等于remaining_height，但我不确定如何达到效果......有什么想法吗？

Answer 1

你可以用简单的HTML＆amp; CSS模仿所需的#container背景...实际将其设置为BODY元素：

<强> LIVE DEMO

或者使用JS / jQuery：

LIVE DEMO

var windowHeight = $(window).height();
var $cont = $('#container'); // or use #containerParent if you have paddings
var contTop = $cont[0].getBoundingClientRect().top;
$cont.height(windowHeight - contTop);

如果您不想拥有包装，并且想要将填充应用于#container
比得好：

<强> LIVE DEMO

var windowHeight = $(window).height();
var $cont = $('#container');
var contH = $cont.outerHeight(true) - $cont.height(); // paddings, borders...
var contT = $cont[0].getBoundingClientRect().top;
$cont.height(windowHeight - contT - contH);

Answer 2

offsetHeight就是你将元素的高度添加到它的padding-top和padding-bottom属性以及边框值时得到的值。

所以你不能只是从remaining_height值中减去填充顶部和底部值以及边框底部/顶部值来获得你所追求的高度吗？

Answer 3

在您的问题中，您说您希望将<div>扩展到页面底部，但您的计算涉及使用$( window ).height();返回浏览器视口的高度（{{3 }}）。

使用视口尺寸可能适用于某些情况，例如，如果在视口不在文档顶部时重新加载页面，则可能会失败。

考虑到这一点，这是我使用的代码：

$(function() {

    //get the height of the document
    var docHeight = $( document ).height();
    var extended = $( "#extended" );
    //offset.top gets the top position related to the document, using border-box.
    var top = extended.offset().top;
    //get the margin, if any.
    var marginBottom = parseInt(extended.css( "margin-bottom" ), 10);
    //set the height so that the bottom margin (or the element) is on the bottom.
    extended.outerHeight(docHeight - top - marginBottom);

});

source

如果元素具有填充，边框和/或边距，则此方法有效。

使div扩展到页面底部

3 个答案: