Javascript 需要没有填充物的clientHeight吗_Javascript

Javascript 需要没有填充物的clientHeight吗

javascript

Javascript 需要没有填充物的clientHeight吗,javascript,Javascript,我需要根据浏览器中的可用高度调整垂直范围控件的大小。我差不多有了，只是我觉得有一些填充/边框/边距的问题我无法回避。虽然它根据浏览器的高度来调整大小，但我的范围控件始终会偏离页面底部几个像素这就是我获得高度的方式： var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 然后使用它设置滑块高度： document.getElementByI

我需要根据浏览器中的可用高度调整垂直范围控件的大小。我差不多有了，只是我觉得有一些填充/边框/边距的问题我无法回避。虽然它根据浏览器的高度来调整大小，但我的范围控件始终会偏离页面底部几个像素

这就是我获得高度的方式：

var height = window.innerHeight 
|| document.documentElement.clientHeight
|| document.body.clientHeight;

然后使用它设置滑块高度：

document.getElementById("slider").setAttribute('style', "height :" + height + "px");

我知道clientHeight返回包含填充的高度，所以我一直在想我只需要得到顶部填充并减去它。问题是，当我得到如图所示的填充时，它是零（警报写出0px）：

同时，滑块的CSS看起来是这样的，所以我不认为它自己的填充/边框/边距是有责任的：

.sliderStyle {
    height: 860px;
    width: 2%;
    -webkit-appearance: slider-vertical;
    padding-top: 0px;
    margin: 0px;
    border: 0px;
}

HTML正文中唯一的内容是范围控件：

<input id="slider" class="sliderStyle"  oninput='' onchange='' type="range"  min="0" max="1000" step="1" value="0">

以下是完整的文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Size Control to Browser</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <style type="text/css" media="screen">
            .sliderStyle {
                height: 860px;
                width: 2%;
                -webkit-appearance: slider-vertical;
                padding-top: 0px;
                margin: 0px;
                border: 0px;
            }
       </style>

    <script type="text/javascript">
            function start() {
                var height = window.innerHeight
                                || document.documentElement.clientHeight
                                || document.body.clientHeight;
               alert('clientHeight: ' + height);
               alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));
               alert("top margin: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('margin-top'));
               document.getElementById("slider").setAttribute('style', "height :" + height + "px");
          }

    </script>
    </head>
<body onload='start()'>
    <input id="slider" class="sliderStyle"  type="range"  min="0" max="1000" step="1" value="0"> 
</body>
</html>


浏览器的大小控制
.滑块样式{
高度：860px；
宽度：2%；
-webkit外观：滑块垂直；
填充顶部：0px；
边际：0px；
边界：0px；
}
函数start（）{
var height=window.innerHeight
||document.documentElement.clientHeight
||document.body.clientHeight；
警报（'clientHeight:'+高度）；
警报（“顶部填充：”+window.getComputedStyle（document.documentElement，null.getPropertyValue（'padding-top'））；
警报（“上边距：”+window.getComputedStyle（document.documentElement，null）.getPropertyValue（'margin-top'））；
document.getElementById（“滑块”）.setAttribute（“样式”，“高度：”+height+“px”）；
}

clientHeight警报确认不同浏览器大小的高度正在改变

top pad和top margin alerts都返回0px来回答您的问题：使用下面的JavaScript作为

height

变量，而不是使用

clientHeight

或

innerHeight

（并将主体设置为

100vh

）。（见附件）：

JS:

CSS:

HTML:

代码所做的是获取主体内容的高度，本质上是主体的高度，没有任何填充

我将随机

div

元素设置为30px的唯一原因是显示

console.log（height）

将精确输出30px，这是正文中所有内容的高度（在本例中，

div

是正文中唯一的内容），不包括正文的填充（根据我上面使用的示例CSS，它是20px）。您显然可以删除这个
div
，因为这里只是为了示例目的。

JavaScript取自，它还显示了一个遗留的跨浏览器实现。

噢，我不是在使用jQUery，只是纯JavaScript需要更多的信息，但是…也许可以在它周围再加一个div并使用它的高度？谢谢mike，你还需要什么信息？我已经编辑过了，包含了整个文件。将它包装在一个div中表示同一个问题：需要首先调整div的大小，使其完全适合客户区，但它不会。与范围控制一样，它会稍微偏离底部。

alert（“top margn:”……getPropertyValue（“margin-top”））

填充

或

边距

？el Dude-恐怕我不明白你在问什么。有两个单独的警报：一个用于填充，一个用于边距。感谢客户身高和身体高度是两个不同的东西。如果我们愿意，身体可以设置为10px高，而且在许多情况下，身体比客户长高度。@gillesc，是的，是的，谢谢你指出这一点。我已更改代码，将

100vh

添加为身高。这能解决你所说的问题吗？谢谢Josh，但当我测试这个答案时，我得到了与我原来的结果相同的结果。看起来像是视口高度（vh）包括填充。如果是不包括填充的高度，则答案中计算的高度会随着身体填充的增加而减少，但不会。答案中计算的返回高度不会随着身体填充的变化而变化。@LarryHolze，好的，我明白了，我误解了这个问题。我将重新制定解决方案。

<!DOCTYPE html>
<html>
    <head>
        <title>Size Control to Browser</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <style type="text/css" media="screen">
            .sliderStyle {
                height: 860px;
                width: 2%;
                -webkit-appearance: slider-vertical;
                padding-top: 0px;
                margin: 0px;
                border: 0px;
            }
       </style>

    <script type="text/javascript">
            function start() {
                var height = window.innerHeight
                                || document.documentElement.clientHeight
                                || document.body.clientHeight;
               alert('clientHeight: ' + height);
               alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));
               alert("top margin: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('margin-top'));
               document.getElementById("slider").setAttribute('style', "height :" + height + "px");
          }

    </script>
    </head>
<body onload='start()'>
    <input id="slider" class="sliderStyle"  type="range"  min="0" max="1000" step="1" value="0"> 
</body>
</html>

var style = window.getComputedStyle(document.body, null),
    height = style.getPropertyValue("height");

console.log(height);

body {
    padding: 20px;
    height: 100vh;
}

div {
    height: 30px;
}

<div></div>