여러 스크롤링 열을 처리하는 가장 좋은 방법

가변 높이 콘텐츠의 4 개 열을 포함하는 본문 위의 헤더로 시각적으로 구성된 웹 응용 프로그램을 개발하는 중입니다. 디자인 신은 고정 된 높이가되도록 명령했습니다. 주로 각 열이 잠재적으로 매우 길어질 수 있기 때문에 독립적 인 스크롤 막대가있는 iframe을 원합니다.여러 스크롤링 열을 처리하는 가장 좋은 방법

네 개의 (잠재적 인) 스크롤바는 충분히 나쁘지 만 전체 페이지 높이가 브라우저 창보다 높게 고정되면 5로 끝납니다. 물론 '정상적인'해결책은 700 픽셀과 같은 전반적인 페이지 높이를 수직으로 맞추기위한 '최상의 기회'를 부여하는 것입니다.하지만 저는 여러 가지 이유로 그걸하고 싶지 않습니다. 희망이 분명해질 것입니다.

내 질문은 : 동일한 것을하는 각 열을 사용할 수있는 (수직 공간) 채우는 보디 컨테이너를 갖는 가장 좋은 방법은 무엇일까요? 심지어 실용적/가능한가? 보너스 질문 : 열에 CSS 오버 플로우 속성을 사용하거나 불쾌한 iframe이 필요한가요? 나는 많은 CSS 경험을 가지고 있지만, 백분율 크기를 사용하여 none 옆에 (특히 헤더에 필요한 픽셀 크기와 결합 할 때). 또한 표준 호환 및 IE6과 역 호환이 가능해야합니다.

TIA.

EDIT : CSS 레이아웃 솔루션을 찾고 있지 않습니다. 문제는 각 열의 크기를 바디 컨테이너 내에서 가능한 최대 높이가되도록 조절하고 스크롤 할 수있게하는 것입니다. 픽셀로 - 절대적으로 필요하지 않는 한.

출처

2008-10-12 da5id

나는이 정확하게 당신이 필요하지 않습니다 확신합니다.

출처

2008-10-14 16:23:38

Gracias mi amigo! – Vinay

당신은 이와 비슷한 이야기를하고 있습니까?

<div id="head"></div> 
<div id="body"> 
    <div id="col1"></div> 
    <div id="col2"></div> 
    <div id="col3"></div> 
    <div id="col4"></div> 
</div>

이, IE6에서 작동하지 않을 수있는 당신은 자바 스크립트를 사용하는 것

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%; } 
#body div { position: absolute; top:0; bottom:0 ;width: 25% }

CSS의 : 두 번째 질문에 대한 응답으로

window.onResize = function() { 
    // Calculate the height of the body, substract the height of the head and apply to all columns 
}

출처

2008-10-12 21:03:32 Dimitry

감사합니다. Dimitry, 실제로 레이아웃을 구현하는 데 수 많은 방법이 있지만, 고정 높이와 열 스크롤에 관한 것입니다. – da5id

을 그냥 높이를 설정 속성을 사용하여 콘텐츠가 사용자가 필요로하는 것보다 커지지 않도록하십시오. 수 오버플로 - y를 사용하십시오 : 스크롤 (유효한 CSS가 아니지만 작동) 요소에 스크롤바를 강제로.

출처

2008-10-12 21:58:35

건배하지만 높이는 무엇으로 설정 되었습니까? 내 첫 번째 생각은 물론 100 %이지만 확실하게 작동하는지 확신 할 수 없습니다. 나는 진지한 시험을해야 할 필요가 있음을 알 수 있지만 다른 누군가가 이미 거기에 갔으면 좋겠다고 생각했다. – da5id

나는 DIVheight:100%에 서로 한 세트 내에 중첩 된 요소와 다른 padding:60px의 다양한 순열을 시도하고 난 효과적인 높이 100 % -60px을 가지고 내부를 얻을 수있는 방법을 작동하지 않을 수 있습니다. 문제는 백분율 높이가 포함 요소의 height 속성을 참조하고 높이에서 여백과 여백을 뺀 것이 아니라는 것입니다. 한숨.

나는 CSS는 하나

width: 12em - 2px; 
border: 1px solid #FED; /* Total width including border is 12em exactly */

또는

width: 25% - 1em; 
margin: 1.25em 1em;

같이 비율, 글꼴 상대, 픽셀 단위 (의 합과 같은 높이 (또는 차이)를 표현 할 수 있다고 할 말을해야

등등, TeX와 같은 파일 단위).

아마도 배너의 높이를 검사하여 뷰포트의 높이에서 빼고, 그 다음 열을 적절하게 포함하는 상자의 높이를 설정하는 JavaScript를 사용하는 것이 가장 좋습니다.그런 다음 디자이너가 사용하는 크기 화면을 찾아서 디스플레이에 맞게 CSS 파일에서 고정 배선 된 기본값을 설정합니다. Liquid 4 column layout with fixed height banner and footer

없음 iframe을, 아니 자바 스크립트를, 각 열은 자동으로 사용 가능한 높이를 채우는 :

출처

2008-10-14 14:29:19 pdc

여러 스크롤링 열을 처리하는 가장 좋은 방법

답변

관련 문제