어떻게 내용을 스크롤 할 수 있지만 머리글과 바닥 글을 만들 수 없습니까?

Question

이 질문은 하나의 세부 정보가 아니라면 header and footer fixed, content scrollable과 Fixed header, footer with scrollable content의 복제본이었을 것입니다. 이는 나에게 매우 중요합니다. 콘텐츠의 고정 높이와 너비를 지정하고 싶지는 않습니다.

http://jsfiddle.net/mark69_fnd/PWRDa/에는 더미 데이터가 포함 된 실제 양식이 포함되어있어 문제가 있음을 알 수 있습니다. 창의 크기를 조정하면 스크롤 막대가 나타나지만 양식이 아닌 페이지에 나타납니다. 현재 레이아웃에서는 메뉴 바 (menubar)와 상태 표시 줄 (statusbar)이 보이지 않게 스크롤되며 양식 데이터가 스크롤되는 동안 고정되어 있어야합니다.

너비 및 높이가 절대적인 해결책을 제시하지 마십시오. 나는 100 %가 아니라면 CSS로 베이킹하는 대신 자바 스크립트로 계산하는 것을 선호한다. 물론, 순수 HTML/CSS 솔루션이 바람직합니다.

html, body, .yui3-app-views { 
    height: 100%; 
    width: 100%; 
} 

.container { 
    position: relative; /* needed for footer positioning*/ 
    margin: 0 auto; 
    height: auto; 
    min-height: 100%; 
    background-color: #eee; 
} 

.content { 
    background-color: #ddd; 
    padding: 0em 0em 2em; /* bottom padding for footer */ 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    width: 100%; 
    bottom: 0; /* stick to bottom */ 
    background-color: #ccc; 
} 

#status { 
    border: solid 1px #000000; 
} 

#status .error { 
    color: red; 
    font-weight: bold; 
} 

/* ------------------------------------------------------------------------------------*/ 
.char { 
    display: inline-block; 
    vertical-align: top; 
} 

.line { 
    white-space: nowrap; 
} 

/* --------------------------------- fieldset and legend ------------------------------*/ 
.fieldset { 
    border: 2px groove threedface; 
    margin-top: 1em; 
} 

.fakeFieldset { 
    padding: 2px; 
} 

.fieldset > div.legend:first-child { 
    display: inline-block; 
    text-align: left; 
    margin-left: 10px; 
    background: #ddd; 
    position: relative; 
    top: -0.7em; 
} 

.merge-bottom { 
    margin-bottom: -2px; 
} 

/* ------------------------------------ Forms ------------------------------*/ 

form div { 
    white-space: nowrap; 
} 

form select, form input { 
    margin: 2px; 
    border: 1px groove; 
} 

form label:not(.same-line) { 
    width: 8em; 
    text-align: right; 
    display: inline-block 
} 

#cust-balance { 
    text-align: center; 
} 

.ccExpDate { 
    width: 2em; 
} 

#cust-salutation { 
    width: 4em; 
} 

.postalCode { 
    width: 7em; 
} 

#cust-ccAddress { 
    width: 20em; 
} 
​ 

Answer 1

// 아스 커의 의견 업데이트 : 여기

는 CSS입니다.

This 위대한 작품입니다. 내 너비는 100 %로 설정되어 있지만 원하는 경우 JS에서 할 수 있습니다.

당신은 헤더와 나는 또한 상단 헤더의 공간을 만들기 위해 .content 사업부의 일부 패딩을 넣어 position:fixed

바닥 글을 줄 필요가있다. 마찬가지로

다음 그것이 나오는 것에 따라, 더 적은 변화가 필요했다

html, body, .yui3-app-views { 
    height: 100%; 
    width: 100%; 
} 

.content { 
    background-color: #ddd; 
    padding: 2em 0em; /* padding for footer and header */ 
} 

.menubar { 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    z-index:1; 
} 

#footer { 
    position: fixed; 
    width: 100%; 
    bottom: 0; /* stick to bottom */ 
    background-color: #ccc; 
}