javascript - $(element).height 对比 $(element).css ('height' ,value);

Question

function adjustHeight(){
            var headerHeight=$(element).find('.header').outerHeight();
            console.log(headerHeight);
            var temp=$(window).height()-headerHeight;
            console.log(temp);
            $('.users').height(temp);
        }

最初和调整窗口大小时调用一次

.users 元素的高度总是比控制台临时变量高 30 像素。

        $('.users').css('height',temp+'px');

这按预期工作正常。

<div class="mainPage" data-bind="visible:mode() === 'authenticated',handleHeightOfElements:''">
    <div class="header">
        <div>
            This is header text
        </div>
    </div>
    <div class="mainBody">
        <div class="users">

            All users:
            <div data-bind="foreach:userList">
                <div class="user">
                    <span data-bind="text:$data.userName,css:{onlineUser:$data.online()}">
                    </span>
                    </div>
                </div>
        </div>

.users{
float: left;
width: 140px;
background: antiquewhite;
padding: 15px;
box-sizing:border-box;
}

Answer 1

首先:.css("height") 和 .height() 是等价的。

但是你把$('.users').height(temp)设置为temp，这是$(window).height( ) 减去 ('.header').outerHeight()

.outerHeight()包括元素的填充、边距和边框。

这不是 .css("height") 或 .height() 的情况。

我打赌你的 30px 偏移来自边距/填充/边框。
它适合您上次编辑 padding: 15px; for .users。

编辑
这是您的计算错误图像:

计算中不考虑变暗的部分。