HTML5 : 세 행 고정 상단/바닥과 인 flexbox 스크롤 중간

가 고정 header/footer와 html5 인 flexbox 레이아웃 및 파이어 24 크롬 31에 대해 다음과 같이 스크롤 article 부분을 만드는 것이 가능하다?HTML5 : 세 행 고정 상단/바닥과 인 flexbox 스크롤 중간

+----------+ 
| header | 
+----------+ 
| article || 
|   || 
|   || 
|   || 
+----------+ 
| footer | 
+----------+

내가 해봤이 (간체) :

body { 
    display: flex; 
    flex-direction: column; 
} 
header { 
    flex: 1; 
} 
article { 
    flex: 8; 
    overflow-y: scroll; 
} 
footer { 
    flex: 1; 
}

을하고 지금은이 article와 공간 유지되지만 내용의 높이가 윈도우의 높이보다 작은 경우 채우기 위해 노력하고있어 바닥 글은 고정되지 않고이 더 큰 경우, 볼 수있는 영역 밖으로 바닥 글 스크롤 ...

출처

2013-10-20 net.user

플렉스가 기사에 대해 8 인 이유는 무엇입니까? –

@PaulTotzke 여기 미끼를 삼킬거야. 아마 아무도 모른다. 사람들은 요즘 간접적 인 8 가지 계층을 통해 물건을 붙여 넣습니다. 스 니펫은 원래 적용 가능했던 특정 사례에 대해 작성되었을 수 있으며 여기에 상륙했을 때 인터넷을 통해 복사 붙여 넣기를 통해 살아 남았습니다. 'flex-grow'에'1' 이외의 다른 값을 사용할 필요는 거의 없으며, 보통 사람들이 원하는'flex-basis'입니다. 얘들 아, https://www.w3.org/TR/css-flexbox/를 읽으십시오. 실제로 읽고 이해하기가 어렵지 않습니다. 영어 원어민이 아니기 때문에 (3 일 동안) 관리했습니다. – amn

그것이 내가 생각한 것이지만 때로는 이상한 브라우저 수정이 있습니다. 그냥 확신 해. –

당신은 아마 만들 필요가 있는지 몸은 100 % 높은 :

html, body { 
    margin:0; 
    height:100%; 
    min-height:100%; 
}

나는 fiddle을 만들었습니다.

출처

2013-10-20 13:19:26 Moob

+11

구현이 올바르지 만 결함이있는 경우 제목 및 바닥 글 크기가 페이지 크기와 관련됩니다. 대부분의 경우 바람직하지 않습니다. 여기 대체 솔루션입니다 https://jsfiddle.net/njfmt7w0/ – mamu

심각하게^up 코멘트를 upvote 수 없습니다. 내가 겪었던 문제와 정확히 같았습니다. –

mamu의 의견에 대한 링크는 매우 간단하고 깨끗한 예입니다. 타이 –

HTML5 : 세 행 고정 상단/바닥과 인 flexbox 스크롤 중간

답변

관련 문제