HTML 컨텐츠를 확장하여 창을 채우도록합니다

Question

HTML 페이지가 수직으로 나뉘어져 있습니다

• 헤더
• 신체
• 보행인

몸은 차례로 수평으로 나뉩니다

• 스크롤 바로 둘러싸인 왼쪽의 큰 div, 다이어그램의 일부를 표시합니다.
• 오른쪽에 양식

헤더와 바닥 글은 고정 높이입니다. 몸은 수직으로 확장되어 헤더와 바닥 글로 점유하지 않은 창의 부분을 채워야합니다.

마찬가지로 양식은 고정형이며 스크롤 창은 창 너비를 채우기 위해 수평으로 확장해야합니다.

다이어그램은 매우 큽니다 (최대 10x10 스크린 픽). 모든 것을 표시 할 수는 없습니다. 대신 사용자가 가능한 한 적게 스크롤해야 할 수 있도록 최대한 많이 표시하고 싶습니다 (전체 창을 사용하여).

일부 사용자는 반드시 편집증이 많고 비활성화해야하기 때문에 JavaScript도 사용할 수 없습니다.

내가 고려한 몇 가지 옵션 :

• 스크롤 창 셀의 너비와 높이가 100%로 설정되고 다른 모든 것은 1%로 설정된 테이블
  작동하지 않습니다. 테이블 (및 페이지)은 스크롤 창설의 절대 포지셔닝을 사용하더라도 전체 다이어그램을 포함하도록 확장됩니다.
• 바닥 글의 높이에 의해 페이지 하단에서 창을 오프셋하는 절대 포지셔닝
  작동하지만 부정확합니다 : 바닥 글의 높이는 현재 글꼴 크기와 텍스트가 래핑되는지 여부에 따라 다릅니다. 이것은 그들이 겹치지 않도록 큰 마진을 남겨 두어야한다는 것을 의미합니다.
• 다이어그램을 iframe에 넣습니다
  스크립트에서 찾은 최상의 솔루션은 비활성화되었지만 스크립트에서 할 수있는 일을 제한합니다. ~이다 활성화.

Google지도는 스크립트가 비활성화 된 경우 맵에 고정 크기 영역을 사용합니다. Google 이이 문제를 포기한 경우, 그것이 가능하지 않다는 것을 의미합니까?

Answer 1

높이 사용 : 100% CSS 속성이 작동해야합니다.

확인하십시오 CSS를 사용한 Dave Woods 100% 높이 레이아웃 당신을 위해 일합니다.

Answer 2

그것은 약간 알려진 측면입니다 position: absolute; 당신이 찾고있는 레이아웃을 제공하는 CSS 속성. 4 개의 방향으로 요소를 상단, 오른쪽, 하단 및 왼쪽으로 절대적으로 배치 할 수 있습니다. 즉, 상자가 브라우저만큼 유동적 일 수 있으며 항상 지정한 컨테이너의 가장자리에서 멀리 떨어진 거리를 유지합니다.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

예를 들어 확인하십시오 http://www.sanchothefat.com/dev/layouts/cssframes.html 그런 다음 소스를보고 CSS를 당겨 CSS를 분리하여보다 복잡한 예에서 어떻게 수행되는지 확인하십시오.

이 접근 방식을 취하면 모든 메인 컨테이너를 절대적으로 배치해야합니다. <div>에스. 글꼴 크기가 우려되는 경우 EMS를 사용하십시오.

추신. IE6이 엉망이된다는 점에서 gotcha가 있지만 (충격!) 내가 제공 한 예제는 IE6 폴백이 있습니다. 고정 된 높이 만 괜찮을 것입니다.