javascript - 需要没有填充的clientHeight-6ren

javascript - 需要没有填充的clientHeight

转载作者：行者123 更新时间：2023-12-04 12:55:19

25

4

我需要根据浏览器中的可用高度来调整垂直范围控件的大小。我几乎拥有它，但我认为存在某种我无法解决的填充/边框/边距问题。尽管它会根据浏览器的高度自行调整大小，但我的范围控件总是从页面底部离开几个像素。

这就是我得到高度的方式:

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

然后使用它来设置 slider 高度:

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

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

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

同时， slider 的 CSS 看起来像这样，所以我不认为它自己的 padding/border/margins 负责:

.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 警报确认不同浏览器尺寸的高度正在变化
top pad 和 top margin alerts 都返回 0px

最佳答案

回答您的问题 : 使用下面的 JavaScript 作为你的 height变量，而不是使用 clientHeight或 innerHeight (并将正文设置为 100vh )。 (见 jsfiddle ):

JS:

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

console.log(height);

CSS:

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

div {
    height: 30px;
}

HTML:

<div></div>

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

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

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

关于javascript - 需要没有填充的clientHeight，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30147850/

25

4

0

文章推荐： ruby-on-rails - rails 3 : SMTP Settings for Hotmail/Live Hosted Email

文章推荐： streaming - 使用 gstreamer 合并音频和视频流

文章推荐： asp.net-mvc - 使用 WebApi 进行客户端验证

c - gstreamer 需要 g_main_loop_run 而 gtk 需要 gtk_main()
我正在尝试用 C 语言编写一个使用 gstreamer 的 GTK+ 应用程序。 GTK+ 需要 gtk_main() 来执行。 gstreamer 需要 g_main_loop_run() 来执行。
python - 为什么 opencv3 需要 libavcodec56 而 opencv2 需要 libavcodec57
我已经使用 apt-get 安装了 opencv。我得到了以下版本的opencv2，它工作正常: rover@rover_pi:/usr/lib/arm-linux-gnueabihf $ pytho
ios - UIScrollView - 需要 x 位置/宽度的约束，需要 y 位置/高度的约束
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
Linux glib 需要 pkg-config 而 pkg-config 需要 glib？
我尝试安装 udev。 udev 在 ./configure 期间给我一个错误 --exists: command not found configure: error: pkg-config and
sql - 为什么我选择 1 需要 40 毫秒，而选择 150 需要 500 秒？
我正在使用 SQLite 3。我有一个表，forums，有 150 行，还有一个表，posts，有大约 440 万行。每个帖子都属于一个论坛。我想从每个论坛中选择最新帖子的时间戳。如果我使用 SEL
Golang jsonapi 需要 string 或 int 但 mongo 需要 bson.ObjectId
使用 go 和以下包: github.com/julienschmidt/httprouter github.com/shwoodard/jsonapi gopkg.in/mgo.v2/bson
sql-server - 同样的 SQL 请求，CockroachDB 需要 4min SQL Server 需要 35ms。我错过了什么吗？
The database仅包含 2 个表: 钱包(100 万行) 事务(1500 万行) CockroachDB 19.2.6 在 3 台 Ubuntu 机器上运行每个 2vCPU 每个 8GB R
c++ - std::iter_swap 需要 ValueSwappable args vs std::swap 需要 Move Assignable args
我很难理解为什么在下面的代码中直接调用 std::swap() 会导致编译错误，而使用 std::iter_swap 编译却没有任何错误. 来自 iter_swap() versus swap() -
oracle - SELECT 需要 100 毫秒； CREATE table as select - 或 - INSERT into select 需要 15 分钟
我有一个非常简单的 SELECT *用 WHERE NOT EXISTS 查询条款。 SELECT * FROM "BMAN_TP3"."TT_SPLDR_55E63A28_59358" SELECT
css - Sass 循环 @import，a.scss 需要 b.scss 上的类，b.scss 需要 a.scss 上的类
我试图按部分组织我的 .css 文件，我需要从任何文件访问文件组中的任何类。在 Less 中，我可以毫无问题地创建一个包含所有文件导入的主文件，并且每个文件都导入主文件，但在 Sass 中，我收到一个
redis - Microsoft.AspNet.SignalR.Redis 需要 StackExchange.Redis.StrongName，但是 StackExchange.Redis.Extensions.Core 需要 StackExchange.Redis
Microsoft.AspNet.SignalR.Redis 和 StackExchange.Redis.Extensions.Core 在同一个项目中使用。前者需要StackExchange.Red
ruby-on-rails - sass-rails 需要 sprockets 2.0.0 但 rails 4.1.0 需要 sprockets 2.12.1
这个问题在这里已经有了答案: Updating from Rails 4.0 to 4.1 gives sass-rails railties version conflicts (4 个答案) 关
需要 Azure 发布管道身份验证
我们有一些使用 Azure DevOps 发布管道部署到的现场服务器。我们已经使用这些发布管道几个月了，没有出现任何问题。今天，我们在下载该项目的工件时开始出现身份验证错误。部署组中的节点显示在线，
需要 Firebase 索引但未提供链接
Tip: instead of creating indexes here, run queries in your code – if you're missing any indexes, you
需要 Elm 语法帮助
你能解释一下 Elm 下一个声明中的意思吗？ (=>) = (,) 我在 Elm architecture tutorial 的例子中找到了它最佳答案这是中缀符号。实际上，这定义了一个函数 (=>
需要 .NET 程序集查看器
我需要一个 .NET 程序集查看器，它可以显示低级详细信息，例如元数据表内容等。最佳答案 ildasm 是 IL 反汇编程序，具有低级托管元数据 token 信息。安装 Visual Studio
需要 VBA 循环逻辑
我有两个列表要在 Excel 中进行比较。这是一个很长的列表，我需要一个 excel 函数或 vba 代码来执行此操作。我已经没有想法了，因此转向你: **Old List** A
.net - 需要.NET库以将TIFF文件转换为PDF
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想要改善这个问题吗？更新问题，以便将其作为on-topi
需要 XML 命名空间吗？
我正在学习 xml 和 xml 处理。我无法很好地理解命名空间的存在。我了解到命名空间帮助我们在 xml 中分离相同命名的元素。我们不能通过具有相同名称的属性来区分元素吗？为什么命名空间很重要或需要
需要 Azure 端口吗？
我搜索了 Azure 文档、各种社区论坛和 google，但没有找到关于需要在公司防火墙上打开哪些端口以允许 Azure 所有组件(blob、sql、compute、bus、publish)的简洁声明

首页

博学

6Ren·AI

商城

javascript - 需要没有填充的clientHeight