3 열 유체 스크롤 센터 CSS 레이아웃

Question

현재 개발중인 응용 프로그램 용 HTML과 CSS를 작성 중입니다.

이 응용 프로그램에는 고정 높이 헤더, 고정 높이 바닥 글 및 나머지 공간을 차지하는 중간 영역이 있습니다.

문제는 머리글과 바닥 글이 전체 시간에 고정되어 있고 너무 커지면 내용이 스크롤되는 문제입니다.

머리글과 바닥 글을 고정하여 스크롤 할 수있는 콘텐츠를 가져올 수 있었지만 스크롤바가 머리글 뒤에 사라지도록 푸시 div를 사용하고 다른 옵션을 사용하면 바닥 글 뒤에 사라집니다. 100 % 높이를주지 않고 최대 크기를 초과하면 div를 스크롤하는 데 어려움을 겪고 있습니다.

http://jsfiddle.net/7gmpu/

순수 CSS로이 가능 : 여기

는 지금까지이 무엇인가? 또는 크기를 조정할 때마다 자바 스크립트로 윈도우 높이를 계산해야합니까?

제 '솔루션'이 가까이 있습니까?

Answer 1

요소를 고정하려면 CSS 위치 지정을 사용해야합니다. 현재의 솔루션은 이미 닫혀 있지만 조금 복잡합니다.

는 세 개의 블록이하고 싶은 말 :

HEADER 
CONTENT 
FOOTER 

가장 자연스러운 방법은 (당신의 웹 사이트는이 3 개 요소로 구성하는 경우에는 필요하지 않음) 컨테이너에 모두 넣고 절대 그들을 배치하는 것입니다. HEADER 상단이 0 인 경우 FOOTER 하단은 0입니다. CONTENT에서 맨 아래와 바닥을 조정하여 바닥 글/머리글의 높이가되도록해야합니다.

#wrapper{position:absolute; top:0;bottom:0;width:100%;} 
#header, #footer, #content{position:absolute; width:100%;} 
#header{top:0; background-color:#faa;height:50px;} 
#content{top:50px;bottom:150px; overflow:auto;} 
#footer{bottom:0px; background-color:#afa; height:150px} 

Demo

편집 : Your updated demo 당신이 #wrapper,는 #header, #content와의 #footer를 사용하는 경우

그래서, 이것은 당신이 필요합니다 코드입니다. 고정 위치 지정을 사용하려면 높이 값을 지정하지 마십시오. top 및 bottom을 정의하여 암시 적 높이를 대신 사용하십시오. 또한 스크롤바에는 overflow:auto을 사용하십시오. 다음과 같이 변경했습니다 :

#mid { 
    background: #222; 
    /* dropped height */ 
    bottom:50px; /* implicit height */ 
    overflow:auto; /* automatical scrollbars */ 
    width:  100%;  
    position: fixed; 
    top:  100px; 
} 

Answer 2

매우 적은 마크 업으로 원하는 효과를 얻을 수 있습니다.

* { 
    box-sizing: border-box; 
} 

html, body { 
    height: 100%; 
} 

body { 
    padding-bottom: 5em; 
    padding-top: 7em; 
    position: relative; 
} 

body > div#container { 
    position:absolute; 
    top: 7em; 
    bottom: 5em; 
    width: 100%; 
    overflow-y: scroll; 
    min-height: 3em; 

} 

body > header { 
    height:7em; 
    position:relative; 
    margin-top: -7em; 
} 

body > footer{ 
    height:5em; 
    position: absolute; 
    bottom: 0; 
} 

을하고 갈 준비가되어 있어야 : 다음 CSS로 스타일을 지정할 수 있습니다

<header> 
    Header 
</header> 
<div id="container"> 
    <article class="post"> 
     A1; 
    </article> 
    <article class="post"> 
     A2; 
    </article> 
    <article class="post"> 
     A3; 
    </article> 
    <article class="post"> 
     A4; 
    </article> 
    <article class="post"> 
     A5; 
    </article> 
</div> 
<footer> 
    footer 
</footer>? 

처럼 보이는 HTML을 감안할 때. footer 5em과 #container 지역은 3 em 아래로 축소, header이 7em입니다 위의 코드에서 http://jsfiddle.net/ramsesoriginal/Mg4Ad/

; : 현재 라이브 예를 볼 수 있습니다