Question

假设我有以下HTML页面：

<body>
 <div id="top" style="height: 100px"></div>
</div>

如何找到div#top下方页面的高度，并将其分配给JavaScript中的变量（允许使用jQuery）？

我的意思如下：

<body>
.-------------------------------. ^
| <div id="top">...</div>       | | 100 px
|-------------------------------| v
|                         ^     | ^
|                         |     | | 
|    How do I find        |     | | rest of the page 
|    this height:         |     | | (nothing here, it's empty)
|                         |     | |
|                         |     | | 
|                         |     | |
|                         |     | |
|                         v     | v
'-------------------------------'
</body>

例如，如果浏览器窗口高度的可见部分是1000px，那么我正在寻找答案900px。如果窗口高度是777px，那么我正在寻找答案677px。等

Answer 1

您无法动态在CSS中找到高度，但您可以使用calc()来计算剩余高度。

在这种情况下，height: calc(100% - 100px)可以正常工作。

您还可以使用视口相对单位 - height: calc(100vh - 100px)。

如果要动态查找下面元素的空间量，只需从元素底部的位置减去视口的高度。

纯JavaScript：(example)

var element = document.querySelector('#target'),
    remainingHeight = document.documentElement.clientHeight - element.getBoundingClientRect().bottom;

alert(remainingHeight); // Height below element

具有更高可读性的等效版本：

var element = document.querySelector('#target'),
    elementBottom = element.getBoundingClientRect().bottom,
    viewportHeight = document.documentElement.clientHeight,
    remainingHeight = viewportHeight - elementBottom;

alert(remainingHeight); // Height below element

jQuery替代方案：(example)

var $element = $('#target'),
    remainingHeight = $(window).height() - ($element.position().top + $element.outerHeight(true));

alert(remainingHeight); // Height below element

具有更高可读性的等效版本：

var $element = $('#target'),
    elementBottom = $element.position().top + $element.outerHeight(true),
    viewportHeight = $(window).height(),
    remainingHeight = viewportHeight - elementBottom;

alert(remainingHeight); // Height below element

只需将这两种解决方案考虑在内，并进行相应调整。上面的JavaScript方法没有考虑元素的边距;而jQuery解决方案确实。你还没说清楚你想要的是什么。

Answer 2

我认为代码是不言自明的。这是一个fiddle。调整框架高度的大小以查看高度的变化。

var topElement		 = document.getElementById("top");
var topElementHeight     = parseInt(getComputedStyle(topElement).height, 10);
var windowHeight	 = window.innerHeight;
var bodyMargin		 = parseInt(getComputedStyle(document.body).margin, 10);
var availableHeight	 = windowHeight - topElementHeight - bodyMargin;
topElement.innerText     = availableHeight;

#top {
    height: 100px;
    background: red;
}

<div id="top"></div>

如何在div下面找到页面一部分的高度？

2 个答案: