display : flex를 사용하여 CSS로 남은 수직 공간 채우기

196

3 행 레이아웃에서 :

  • 상단 행은 내용에 따라 크기가 조정되어야합니다
  • 맨 아래 줄의 픽셀 높이는 고정되어 있어야합니다
  • 가운데 줄이 컨테이너를 채우도록 확장되어야합니다.

문제는 기본 컨텐츠가 확장됨에 따라 머리글과 바닥 글 행을 없애는 것입니다.

구부리기

HTML :

<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break - ->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

CSS :

section {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  height: 300px;
}
header {
  flex: 0 1 auto;
  background: tomato;
}
div {
  flex: 1 1 auto;
  background: gold;
  overflow: auto;
}
footer {
  flex: 0 1 60px;
  background: lightgreen;
  /* fixes the footer: min-height: 60px; */
}

깡깡이:

나는 기존 브라우저를 무시하고 CSS에서 최신의 가장 큰 것을 사용할 수있는 운이 좋은 상황에 처해 있습니다. Flex 레이아웃을 사용하여 이전 테이블 기반 레이아웃을 제거 할 수 있다고 생각했습니다. 어떤 이유로 든, 내가 원하는 것을하고 있지 않습니다 ...

기록을 위해, "남은 높이 채우기"에 관한 SO에 관한 많은 관련 질문이 있지만, 플렉스와 관련된 문제를 해결하는 것은 없습니다. 참조 :

css  layout  flexbox 
— 질크
소스
바이올린에서 예상대로 작동하는 것 같습니다.
— Dayan
예, 나머지 <div>의 내용을 주석 해제하여 어떻게 중단되는지 확인해야합니다. 아마도 깨진 버전을 연결했을 것입니다. 죄송합니다.
— Zilk
질문에 두 가지 버전을 모두 추가했습니다.
— Zilk
무슨 말인지 알 겠어
— Dayan
— Jonathan Stray

답변:

246

간단하게 : DEMO

section {
  display: flex;
  flex-flow: column;
  height: 300px;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;  /* min-height has its purpose :) , unless you meant height*/
}
<section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
스 니펫 확장

전체 화면 버전 

section {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;
  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;
  /* min-height has its purpose :) , unless you meant height*/
}

body {
  margin: 0;
}
<section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
스 니펫 확장

— G 키릴 러스
소스
20
섹션의 높이가 100 %가되도록하려면 어떻게해야합니까?
— Paul Totzke
5
@PaulTotzke 그러면 다른 질문과 마찬가지로 높이를 100 %로 설정하면됩니다. 평소와 같이 부모는 높이 설정 / 사용 가능이 필요합니다. 그렇지 않으면 위 코드에 대한 'null'예제의 고전적인 100 %가 있습니다 : html, body, section {height : 100 %;} 여기서 section은 body jsfiddle.net/ 7yLFL / 445 는 머리글과 바닥 글이 고정되어 있습니다.
— G-Cyrillus
1
@GCyrillus 감사합니다. HTML, 본문 및 래퍼는 모두 크기가 설정되어 있어야합니다.
— Paul Totzke
1
"최소 높이에는 목적이 있습니다". 고정 요소의 높이를 사용하여 왜 작동하지 않는지 궁금했습니다.
— Maciej Krawczyk 2016 년
2
파이어 폭스 에서이 솔루션에 문제가있었습니다. 로 변경 flex: 1하여 수정했습니다 flex-grow: 1. 솔루션 주셔서 감사합니다!
— strange_developer
19

아래 예는 확장 된 중심 구성 요소의 내용이 경계를지나 확장되는 경우 스크롤 동작을 포함합니다. 또한 중심 구성 요소는 뷰포트에서 남은 공간의 100 %를 차지합니다.

여기에 jsfiddle

html, body, .r_flex_container{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}
.r_flex_container {
    display:flex;
    flex-flow: column nowrap;
    background-color:blue;
}

.r_flex_fixed_child {
    flex:none;
    background-color:black;
    color:white;

}
.r_flex_expand_child {
    flex:auto;
    background-color:yellow;
    overflow-y:scroll;
}

이 동작을 보여주기 위해 사용할 수있는 HTML의 예

<html>
<body>
    <div class="r_flex_container">
      <div class="r_flex_fixed_child">
        <p> This is the fixed 'header' child of the flex container </p>
      </div>
      <div class="r_flex_expand_child">
            <article>this child container expands to use all of the space given to it -  but could be shared with other expanding childs in which case they would get equal space after the fixed container space is allocated. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
            </article>
      </div>
      <div class="r_flex_fixed_child">
        this is the fixed footer child of the flex container
        asdfadsf
        <p> another line</p>
      </div>

    </div>
</body>
</html>
— 가모 지
소스
3
html선택기에서 제거 height: 100vh하고 body구체적 으로 적용하여 약간 단순화 할 수 있습니다 . jsfiddle.net/pm6nqcqh/1
— Dai
확장 가능한 자식에서 flex : auto와 flex : 1의 차이점을 알았습니다. flex : auto를 사용하면 다른 어린이들이 필요할 때 줄어드는 것처럼 보이고 flex : 1에서는 그렇지 않습니다 (Chrome에서는)
— mvermand
7

보다 현대적인 접근 방식은 grid 속성을 사용하는 것입니다.

section {
  display: grid;
  align-items: stretch;
  height: 300px;
  grid-template-rows: min-content auto 60px;
}
header {
  background: tomato;
}
div {
  background: gold;
  overflow: auto;
}
footer {
  background: lightgreen;
}
<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
스 니펫 확장

— wuppie367
소스
1
CSS 그리드 지원은 상당히 새롭습니다. 오래된 브라우저를 지원할 필요가 없으면 사용하지 않을 것입니다.
— adi518
4

flex-grow기본 콘텐츠 div에 속성을 사용하고 해당 속성을 dispaly: flex;부모 에게 제공하십시오 .

body {
    height: 100%;
    position: absolute;
    margin: 0;
}
section {
  height: 100%;
  display: flex;
  flex-direction : column;
}
header {
  background: tomato;
}
div {
  flex: 1; /* or flex-grow: 1  */;
  overflow-x: auto;
  background: gold;
}
footer {
  background: lightgreen;
  min-height: 60px;
}
<section>
  <header>
    header: sized to content
    <br>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>
스 니펫 확장

— 디푸 레구나 스
소스
이 문제에 대한 다른 해결책 ( section높이가 고정되어 있지 않은 곳 )이 position: absolute있습니까?
— Ben
1
@ben 요소의 높이를 알고 있다면. 그런 다음 사용을 피할 수 있습니다 position: absolute;. https://jsfiddle.net/xa26brzf/
— Deepu Reghunath
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.