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

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

javascript jquery html css

Javascript 如何在div下面找到页面部分的高度？,javascript,jquery,html,css,height,Javascript,Jquery,Html,Css,Height,假设我有以下HTML页面： <body> <div id="top" style="height: 100px"></div> </div> 例如，如果浏览器窗口高度的可见部分是1000px，那么我正在寻找答案900px。如果窗口高度是777px，那么我在寻找答案677px。等等。您无法在CSS中动态查找高度，但可以使用来计算剩余高度在这种情况下，height:calc（100%-100px）可以工作也可以使用视口相对单位-高度：计算（1

假设我有以下HTML页面：

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

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

您无法在CSS中动态查找高度，但可以使用来计算剩余高度

在这种情况下，

height:calc（100%-100px）

可以工作

也可以使用视口相对单位-

高度：计算（100vh-100px）

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

纯JavaScript：

可读性增强的等效版本：

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

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

jQuery备选方案：

可读性增强的等效版本：

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

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解决方案确实如此。您还没有明确说明您想要哪个。

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

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=窗高-顶元素高度-车身边距；
topElement.innerText=可用高度
#顶部{
高度：100px；
背景：红色；
}
非常好。后续问题-如何将此值分配给JavaScript变量？我需要这个在我的JS代码。很抱歉没有具体说明。我会更新这个问题。（允许使用jQuery）eeeeks。我试试这个。：）刚刚试过-它成功了！Jquery总是好的。我在所有项目中都使用Jquery:）没有边距问题，在IE8中工作：）var height=getComputedStyle（document.getElementById（“elementId”））.height
@akinuri但是在div#top…Thenks下面没有元素，但是第四行的-8
是做什么的？@bodacydo默认情况下，body
元素的边距为8px
。在本例中，我没有覆盖该边距。如果用正文{margin:0；}
覆盖正文边距，则不必减去8。是否可以更新代码以自动计算边距？因此，我不必确定它是0还是8（或其他值）。我正在制作一个JS库，这样它就可以在任何浏览器中运行，并且有任何边距：（@bodacydo Done.更新了答案中的提琴和代码。如果body
有边距，或者没有边距，bodyMargin将设置为该值。哟，谢谢你！我将在我的库中为你评分。：）它被称为WindowSizeComputing.JS:）
var $element = $('#target'),
    elementBottom = $element.position().top + $element.outerHeight(true),
    viewportHeight = $(window).height(),
    remainingHeight = viewportHeight - elementBottom;

alert(remainingHeight); // Height below element