Question

我需要根据浏览器中的可用高度调整垂直范围控件的大小。我只是拥有它，除了我认为有一些类型的填充/边框/边距问题，我无法解决。虽然它根据浏览器的高度自行调整大小，但我的范围控制总是偏离页面底部几个像素。

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

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

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

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

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

alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));

同时，滑块的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>

clientHeight警报确认不同浏览器尺寸的高度正在变化顶部垫和顶部边距警报均返回0px

Answer 1

回答您的问题：使用以下JavaScript作为height变量，而不是使用clientHeight或innerHeight（并将正文设置为{ {1}}）。（见jsfiddle）：

JS：

100vh

CSS：

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

console.log(height);

HTML：

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

div {
    height: 30px;
}

代码所做的是获取正文内容的高度，实质上是没有任何填充的正文高度。

我在其中放置一个设置高度为30px的随机<div></div>元素的唯一原因是显示div将输出正好30px，这是正文中所有内容的高度（在这种情况下，console.log(height)是身体中唯一的东西），不包括身体的填充（根据我上面使用的示例CSS，它是20px）。 您显然可以删除此div，因为它仅用于示例目的。

JavaScript来自this answer to "Get the height of an element minus padding, margin, border widths"，它还显示了传统的跨浏览器实现。

需要clientHeight而不填充

1 个答案: