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 px。

        $('.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()的结果计算

design proposals包括元素的填充，边距和边框。

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

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

修改
这是你的计算错误成像：

.outerHeight()

计算中不会考虑加密的部分。

$（元素）.height vs $（元素）.css（'height'，value）;

1 个答案: