동적으로 채워지는 HTML 표의 높이 결정

HTML로 다이어그램을 그려 보겠습니다. 위치 결정 구조는 다음과 같다 :동적으로 채워지는 HTML 표의 높이 결정

<div id='hostDiv'> 
    <div id='backgroundDiv'> 
    ... drawing the background ... 
    </div> 
    <div id='foregroundDiv' style='position: absolute;'> 
    ... drawing the foreground ... 
    </div> 
    </div>

전경 동적 따라서 행의 높이가 셀에 들어가는 텍스트의 양에 따라 alter입니다 수도 텍스트로 채워 테이블 엘리먼트를 포함한다. foregroun에서 Table 요소의 최종 높이를 어떻게 예측할 수 있습니까? 배경의 정확한 높이를 설정하려면이 정보가 필요합니다. Javascript에서 표를 미리 렌더링하고 높이를 읽는 방법이 있습니까? 아니면 다른 속임수?

추신. 브라우저의 크기가 변하면 hostDiv의 크기가 달라질 수 있습니다.

출처

2008-10-02 Mr. Lame

div에 테이블? –

실제로 대상 브라우저에서 높이를 예측하지 않고 높이를 예측할 수있는 방법이 없습니다. 당신이 그렇게하면

, 당신은 요소의 높이를 얻을 수 jQuery (예를 들어)를 사용할 수 있습니다 : jQuery를 사용하는 동안

var height = $('#myTable').height();

출처

2008-10-02 12:03:41

, 실제로 전에 테이블 의 높이를 찾을 수 있습니다 그것을 사용자에게 표시됩니다. 브라우저가 인접 요소에 따라 렌더링 및 위치 요소 것 같은

$(document).ready(function() { var height = $('#myTable').height(); });

출처

2008-10-02 12:06:26

테이블을 사용자에게 렌더링 한 후의 높이는 어떻게됩니까? –

당신은 부하 때까지 요소의 전체 높이를 예측할 수 없습니다 : (저 위의 사람으로부터 자유롭게 차입 코드)이 같은 구조를 사용하여 및보기 창의 크기.

그렇다면 대부분의 js 라이브러리를 사용하여 찾고있는 것을 찾을 수 있습니다. 프로토 타입에서, 그건 :

$('navlist-main').offsetHeight

이 재귀 적으로 각각의 하위 요소 및 관련 마진과 패딩 렌더링 된 높이 (뿐만 아니라 스타일 높이)를 추가하고 요소 높이에 대한 정확한 수치를 반환합니다.

출처

2008-10-02 12:10:15 japollock

foregorund div의 크기를 조정하기 전에 테이블을 표시하지 않으려는 경우 :
테이블에 style.visibility = "hidden"을 설정하십시오. display : none과 달리, 이것은 문서 흐름에서 div를 제거하지 않으므로 전경 div의 크기가 여전히 적절합니다 (표가 보이지 않음).

물론 허용되는 경우 foregroundDiv을 backgroundDiv로 이동하고 절대 위치 지정을 제거 할 수 있습니다. 그런 다음 backgroundDiv는 자동으로 foregroundDiv (및 테이블)을 포함하도록 크기가 조절됩니다. 난 당신이 DOM 중 하나를 사용할 수 있다고 생각

출처

2008-10-02 12:11:40 Ash

속성 : clientHeight,는 offsetHeight 및 scrollHeight을 W3에 정의 된 here

이것은 clientHeight의 사용이다 : 당신은 왜에 원시 텍스트를 가하고 있습니다

document.getElementById("#Table").clientHeight; 
document.getElementById("#Table").clientWidth;

출처

2011-02-24 03:32:49

동적으로 채워지는 HTML 표의 높이 결정

답변

관련 문제