$ (element) .height vs $ (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);
        }

calling it once initially and when resizing the window

the height of the .sers element is always 30 pixels larger than the held temporary variable.

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

This works fine as expected.

<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

First: .css("height")and .height()are equivalents.

But you set $('.users').height(temp)using temp, which is the result of calculating $(window).height()minus('.header').outerHeight()

.outerHeight() Includes padding, edge and border of the element.

This does not apply to .css("height")or .height().

, 30px //.
padding: 15px; .users.

:

.