$(元素).height vs $(元素).css('height',value);

时间:2016-07-20 18:39:59

标签: javascript jquery html css

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;
}

1 个答案:

答案 0 :(得分:3)

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

但您将$('.users').height(temp)设为temp,这是$(window).height()减去('.header').outerHeight()的结果计算

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

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

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

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

.outerHeight()

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