javascript - 使div延伸到页面底部

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

您可以通过模仿所需的 #container 背景在纯 HTML 和 CSS 中完成此操作...实际上将其设置为 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);

如果你不想有一个包装器并且你想应用paddings到#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);