如何找到div以下页面的某个部分的高度？
[英]How to find height of a section of the page below a div?
问题描述
Suppose I've the following HTML page: 
假设我有以下HTML页面：
<body>
<div id="top" style="height: 100px"></div>
</div>
How do I find what the height of the page below the div#top is and assign it to a variable in JavaScript (jQuery is allowed)? 如何找到div#top以下页面的高度并将其分配给JavaScript中的变量（允许使用jQuery）？
What I mean is the following: 我的意思是：
<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>
For example, if the visible part of browser window height is 1000px, then I'm looking for answer 900px. 例如，如果浏览器窗口高度的可见部分是1000px，那么我正在寻找900px的答案。 If the window height is 777px, then I'm looking for answer 677px. 如果窗口高度为777px，那么我正在寻找677px的答案。 Etc. 等等。
2 个解决方案
解决方案1
2 2014-10-12 18:32:21
You can't dynamically find the height in CSS, but you can use calc() to calculate the remaining height. 您无法在CSS中动态找到高度，但可以使用calc()计算剩余高度。
In this case, height: calc(100% - 100px) would work. 在这种情况下，可以使用height: calc(100% - 100px) 。
You can also use viewport-relative units - height: calc(100vh - 100px) . 您还可以使用视口相对单位height: calc(100vh - 100px) 。
If you want to dynamically find the amount of space below an element, just subtract the height of the viewport from the position of the bottom of the element. 如果要动态查找元素下方的空间量，只需从元素底部的位置减去视口的高度即可。
Pure JavaScript: (example) 纯JavaScript ：（ 示例）
var element = document.querySelector('#target'),
remainingHeight = document.documentElement.clientHeight - element.getBoundingClientRect().bottom;
alert(remainingHeight); // Height below element
Equivalent version with increased readability: 具有更高可读性的等效版本：
var element = document.querySelector('#target'),
elementBottom = element.getBoundingClientRect().bottom,
viewportHeight = document.documentElement.clientHeight,
remainingHeight = viewportHeight - elementBottom;
alert(remainingHeight); // Height below element
jQuery alternative: (example) jQuery替代品：（ 示例）
var $element = $('#target'),
remainingHeight = $(window).height() - ($element.position().top + $element.outerHeight(true));
alert(remainingHeight); // Height below element
Equivalent version with increased readability: 具有更高可读性的等效版本：
var $element = $('#target'),
elementBottom = $element.position().top + $element.outerHeight(true),
viewportHeight = $(window).height(),
remainingHeight = viewportHeight - elementBottom;
alert(remainingHeight); // Height below element
Just take the box-model into consideration with both of these solutions, and adjust accordingly. 只需考虑这两种解决方案的盒式模型，然后进行相应调整。 The JavaScript method above doesn't take the element's margin into consideration; 上面的JavaScript方法没有考虑元素的边距； whereas the jQuery solution does . 而jQuery解决方案可以 。 You haven't made it clear which you want. 您尚未明确说明您想要哪个。
解决方案2
0 2014-10-12 19:17:56
I think the code is self-explanatory. 我认为代码是不言自明的。 Here's a fiddle . 这是一个小提琴 。 Resize the frame height to see the change in height. 调整框架高度的大小以查看高度的变化。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.