html 페이지 크기를 어떻게 이해합니까?

Question

첫날부터 저에게는 신비가있었습니다. 그리고 그것은 여전히 ​​있습니다. 시간이 그것을 밝혀 내기 위해 왔습니다. 그래서 나는 을 포함하는 test page을 만들었습니다. 범위는 변경할 수 있습니다. 관련 속성의 값을 표시하는 정보 패널 단순하게 Chrome을 사용합시다.

기본 body 이익률은 8px입니다. html 님의 배경이 청색이면 body 님의 녹색이며 div은 빨간색입니다. 그리고 여기서 우리는 html의 offsetHeight이 body.offsetHeight + 2 * body.margin과 같고 단지 body 인 것처럼 보입니다. 그러나 html.clientHeight == window.innerHeight, 마치 뷰포트를 채우는 것처럼 늘어납니다.

지금, 오른쪽으로 조금 이동 ( div의 폭 1000px 수 있도록)의 수평 스크롤 막대를 추가 할 수 있도록 : 왼쪽

html 및 body 이동. body의 scrollLeft은 스크롤바를 소유하고있는 것처럼 window.pageXOffset과 동기화되어 변경됩니다. 스크롤바가 추가되어 html의 clientHeight이 변경되었습니다.

는의 주위에 그것을 (수직 스크롤) 다른 방법을 보자 :

지금 모두 html의 범위는 ( offsetWidth 및 clientWidth)를 변경했습니다. 어떤 제안은 스크롤바를 소유하지 않습니다. 양쪽 모두의 스크롤와

그리고 마지막으로, :

음,이 시점에서 상황이 더 많거나 clear 덜 내게된다. 적어도 Chrome을 고려하는 한. 그러나 내가 알고 싶어하는 몇 가지 것들이 여전히 있습니다.

• 어떻게 html의이 clientHeight 가능성이 offsetHeight 적은 다음이 될 수 오지? "그저 그렇습니다"보다 더 나은 설명이 있습니까?

• 왜 페이지를 스크롤 할 때 body의 scrollLeft/scrollTop이 변경됩니까? 그것은 스크롤바를 소유하지 않습니다. 그렇죠?

일부 요약본도 있습니다.

Answer 1

그래서 뷰포트 (창)에 표시되는 캔버스가 있습니다. 캔버스에 html 요소가 있으며 여기에는 body이 포함되어 있습니다.그들은 거의 div들처럼,하지만 몇 가지 단점이있다 : 기본 (width: auto)에 의해

• html 요소 뷰포트에 맞게 뻗어. 아마도 기발한 것이 아닙니다. 뷰포트는 html 님의 컨테이너입니다. 보통은 div으로 컨테이너의 너비에 맞 춥니 다 (스크롤바 제외).

• html의 높이가 body 요소만큼 커야합니다. 그러나 어떤 이유로 그 clientHeight은 뷰포트 높이에서 스크롤바를 뺀 값과 같습니다. 마치 Y 축을 따라 뷰포트에 맞게 늘어납니다.

• body의 상단 여백 html의 하나

• body로 붕괴하지 않는다 '의 scrollLeft/scrollTop 특성이 뷰포트의 pageXOffset/pageYOffset

• body 미러링은'바닥에 스트레칭의 흔적을 보여줍니다 예를 들어, bottom 속성이 설정되어있는 절대적으로 배치 된 요소가없는 경우 뷰포트의 가장자리에 배치합니다. offsetParent 값, 절대 위치 요소는 기본적으로 렌더링 상대되는 요소로서 body 작용이 html 년대 있다는 차이가 파이어 폭스

(다른 절대 위치 요소 가입 계층이없는 한)에서 판단 scrollLeft/scrollTop 미러 뷰포트의 pageXOffset/pageYOffset 속성

모든 것은 내가 보는 것에 대한 나의 해석 일뿐입니다. 누군가가 나를 바로 잡는다면 기뻐할 것입니다.