$ (요소). 높이 vs (요소) .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 픽셀 이상입니다.

 $('.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; 
}

출처

2016-07-20 rishabh dev

동작을 표시하는 예를 설정할 수 있습니까? – empiric

'padding : 15px'는 상단과 하단에 15px의 패딩을 추가합니다. 15 + 15 = 30.'.height()'는 요소의 innerHeight를 설정합니다. 그래서 귀하의 CSS에서 패딩은이 값에 추가됩니다. – empiric

[this example] (https://jsfiddle.net/nwcydn8r/)을보십시오. css 섹션에'padding '을 넣거나 빼고 ot를 실행하고'.user' 요소를 검사하십시오. – empiric

: .css("height") 및 .height()은 동등하다.

하지만 $(window).height() 마이너스 ('.header').outerHeight()

.outerHeight()의 결과 계산이다 temp와 $('.users').height(temp) 설정 요소의 패딩, 여백 및 테두리가 포함되어 있습니다.

.css("height") 또는 .height()의 경우는 아닙니다.

30px 오프셋은 여백/패딩/경계에서 발생합니다.
그리고 에 대한 마지막 편집 padding: 15px;과 맞습니다.

편집
는 여기에 귀하의 계산 오류가 몇 군데 있습니다 :

어두운 된 부품은 귀하의 계산에 계정에서 촬영되지 않습니다.

출처

2016-07-20 19:01:42

.header 요소에는 여백이나 여백이없고 .users 요소에는 box-sizing을 사용하고 있습니다 : border-box, 그것이 영향을 미치지 않아야한다는 것입니다. –

@rishabhdev 그는 맞습니다. 당신의'.users'-div에는 패딩이 있습니다. – empiric

$ (요소). 높이 vs (요소) .css ('높이', 값);

답변

관련 문제