전체 높이 앱에서 Flexbox와 세로 스크롤을 결합하려면 어떻게해야합니까?

flexbox를 사용하여 전체 높이 앱을 사용하고 싶습니다. display: box;이 링크에서 이전 flexbox 레이아웃 모듈 ( 및 기타)을 사용하여 원하는 것을 찾았습니다 .CSS3 Flexbox 전체 높이 앱 및 오버플로

이는 이전 버전의 flexbox CSS 속성 만 지원하는 브라우저에 적합한 솔루션입니다.

새로운 flexbox 속성을 사용하려면 해킹으로 나열된 동일한 링크에서 두 번째 솔루션을 사용하려고합니다 height: 0px;.. 세로 스크롤을 보여줍니다.

나는 그것이 다른 문제를 소개하고 해결책보다 해결 방법이기 때문에 많이 좋아하지 않습니다.

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

기본 예제와 함께 JSFiddle도 준비했습니다. http://jsfiddle.net/ch7n6/

전체 높이 HTML 웹 사이트이며 콘텐츠 요소의 가변 상자 속성으로 인해 바닥 글이 맨 아래에 있습니다. 다른 높이를 시뮬레이션하기 위해 CSS 코드와 결과 사이에 막대를 이동하는 것이 좋습니다.

나에게 답을 준 https://stackoverflow.com/users/1652962/cimmanon 에게 감사드립니다 .

해결책은 세로 스크롤 가능 요소에 높이를 설정하는 것입니다. 예를 들면 :

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

최소 높이 를 원하지 않는 한 flexbox가 다시 계산하기 때문에 요소 는 높이가 있으므로 다음 height: 100px;과 동일하게 사용할 수 있습니다 .min-height: 100px;

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

따라서 min-height세로 스크롤에서 원하는 경우 최상의 솔루션 :

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

기사를 볼 수있는 공간이 충분하지 않은 경우 전체 세로 스크롤을 원하는 경우 :

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

최종 코드 : http://jsfiddle.net/ch7n6/867/

여기에 Flexbox 사양 편집기가 있습니다.

이것은 flexbox의 권장 사용이지만 최상의 동작을 위해 조정해야 할 몇 가지 사항이 있습니다.

• 접두사를 사용하지 마십시오. 접두사가없는 flexbox는 대부분의 브라우저에서 잘 지원됩니다. 항상 접두사가없는 것으로 시작하고이를 지원하기 위해 필요한 경우에만 접두사를 추가하십시오.

• 머리글과 바닥 글은 구부러지지 않기 때문에 둘 다 flex: none;설정되어 있어야 합니다. 지금은 겹치는 효과로 인해 비슷한 동작이 발생하지만 나중에 실수로 혼동하지 않는 한 그것에 의존해서는 안됩니다. (기본값은 flex:0 1 auto이므로 자동 높이에서 시작하여 축소 할 수 있지만 커질 수는 없지만 overflow:visible, 기본적으로 도 min-height:auto축소되지 않도록 기본값 을 트리거 합니다.에를 설정 한 경우 변경 overflow동작은 min-height:auto(최소 콘텐츠가 아닌 0으로 전환) 그리고 그들은 갑자기 매우 키가 큰 <article>요소에 찌그러 질 것 입니다.)

• 당신은 <article> flex너무 단순화 할 수 있습니다 -그냥 설정 flex: 1;하고 당신은 갈 수 있습니다. 좀 더 복잡한 작업을 수행 할 합당한 이유가없는 한 https://drafts.csswg.org/css-flexbox/#flex-common 의 공통 값을 고수하십시오. 대부분의 동작을 읽고 다루기가 더 쉽습니다. 호출하고 싶을 것입니다.

현재 사양은 다음과 flex: 1 1 auto같이 말합니다 .

width/ height속성을 기준으로 항목의 크기를 조정 하지만 완전히 유연하게 만들어 주 축을 따라 여유 공간을 흡수합니다. 모든 항목이 하나 인 경우 flex: auto, flex: initial또는 flex: none, 크기 된 항목 후 긍정적 빈 공간으로 항목에 균등하게 분배됩니다 flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

요소의 높이가 100px라고 말하면 절대적인 것이 아니라 "제안 된"크기로 취급되는 것처럼 들립니다. 수축 및 성장이 허용되기 때문에 허용되는만큼의 공간을 차지합니다. 그래서 "main"요소에이 줄을 추가하는 것이 효과가 있습니다 : height: 0(또는 다른 작은 숫자).