가변 머리글, 스크롤 가능 본문 및 HTML의 바닥 글

Question

머리글, 내용 및 바닥 글 구역이 세로로 배치되어있는 간단한 HTML 레이아웃을 만들려고합니다.

머리글과 바닥 글의 높이는 내용에 따라 유연해야합니다.

콘텐츠 섹션의 높이는 나머지 높이 여야하므로 전체 레이아웃은 창의 전체 높이를 사용합니다. 콘텐츠 섹션은 스크롤 할 수 있습니다.

그래서 순서 :

1. 헤더. 높이는 콘텐츠 높이에 따라 다릅니다. 스크롤 막대가 없습니다.
2. 콘텐츠. 높이는 나머지이다. window_height - (header_height + footer_height)입니다. 필요한 경우 스크롤 막대 (넘침 : 자동;)
3. 바닥 글. 높이는 콘텐츠 높이에 따라 다릅니다. 스크롤 막대가 없습니다.

정적 머리글 및 바닥 글 높이에 대한 예제가 많이 있지만 콘텐츠 기반 높이를 처리 할 수있는 것이 없습니다.

절대/상대/고정 위치로 일반 div를 시도했습니다. 여러 구성에서 display : table/table-row/table-cell을 사용하여 div를 시도했습니다. 나는 심지어 실제를 사용해 보았습니다. 그러나 이들 중 어느 것도 작동하지 않는 것 같습니다. 다음은 많은 실패한 시도 중 하나입니다. http://jsbin.com/uveloj/15/edit

가능한 경우 스크립팅하지 않고 (가능한 한 JS에 의존하지 않는 것을 선호합니다) 어떻게해야합니까?

Answer 1

JavaScript를 사용하지 않으면 이것이 가능하지 않다고 생각합니다. 원하는 중간 스크롤을 얻으려면 내용 영역에 높이가 설정되어 있어야합니다. 머리글과 바닥 글이 동적으로 변경 될 수있는 경우에는 JavaScript를 사용하지 않고 스크롤 할 수 있도록 콘텐츠 영역의 높이를 업데이트 할 수 없습니다. 그러나 JS의 몇 줄을 작성하려는 경우이 레이아웃은 매우 간단합니다.

http://jsfiddle.net/rogerblanton/8ctJJ/

프레임을 사용해서는 안 : 나는 당신을 위해 좋은 예제를 가지고있다.

Answer 2

프레임 사용에 관해 생각해 봤습니까?

Answer 3

나는이 스레드를 훨씬 나중에 보았지만 유용하다고 생각했습니다. 콘텐츠의 높이를 고정 JS 게다가

$(window).resize(function() { 
    var windowHeight = $(window).height(); 
    var headerHeight = $('div#header').outerHeight(true) 
    var footerHeight = $('div#footer').outerHeight(true); 

    var contentHeight = windowHeight - (footerHeight + headerHeight); 
    var contentMargins = $('div#content').outerHeight(true) - $('div#content').height(); 
    var contentInnerHeight = contentHeight - contentMargins; 

    $('div#content').height(contentInnerHeight); 
}).resize(); 

:

나는 일반적인 경우에, 당신은 기능이 도움 등 당신은 jQuery의 outerHeight()를 사용할 수있는 계정 여백, 테두리, 고려 할 필요가 있음을 발견 유일한 중요한 점은 내용의 오버플로 스타일을 스크롤 또는 자동으로 설정하는 것입니다.

다음은 로저의 바이올린의 변형 예이다 :

http://jsfiddle.net/nuAmG/1/