헤더와 바닥 글 div 사이의 모든 공간을 채우기 위해 div를 만드는 방법

StackOverflow https://stackoverflow.com/questions/206652

  •  03-07-2019
  •  | 
  •  

문제

레이아웃 목적으로 테이블 사용에서 DIV 사용으로 이동하는 작업을 수행하고 있습니다 (예, 위대한 토론). 나는 3 개의 div, 헤더, 내용 및 바닥 글이 있습니다. 헤더와 바닥 글은 각각 50px입니다. 바닥 글 div가 페이지 하단에 머무르고 그 사이의 공간을 채우기 위해 내용 DIV를 어떻게 유지합니까? 화면 해상도가 변경 될 수 있으므로 컨텐츠 divs 높이를 하드 코딩하고 싶지 않습니다.

도움이 되었습니까?

해결책

Flexbox 솔루션

Flex 레이아웃을 사용하여 자연 높이 헤더 및 바닥 글을 허용하면서이를 달성 할 수 있습니다. 헤더와 바닥 글은 뷰포트의 상단과 하단에 각각 고수하고 (기본 모바일 앱과 마찬가지로) 기본 콘텐츠 영역은 나머지 공간을 채우고 해당 영역 내에서 수직 오버플로를 스크롤 할 수 있습니다.

JS 바이올린을 참조하십시오

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

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

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

다른 팁

요약하기 위해 (그리고 이것은에서 나왔습니다 CSS 끈적 끈적한 바닥 글 Traingamer가 제공 한 링크), 이것이 내가 사용한 것입니다.

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

Mitchel 판매자 답변을 확장하려면 콘텐츠 DIV 높이 : 100%를 제공하고 자동 마진을 제공하십시오.

전체 설명과 예는 Ryan Fait 's를 참조하십시오. CSS 끈적 끈적한 바닥 글.

헤더의 크기 (높이)를 알고 있으므로 콘텐츠 DIV (또는 마진 사용)에 넣으십시오.

위치 절대는 콘텐츠가 창보다 더 큰 (키가 큰 경우) 문제를 줄 것입니다.

CSS 그리드를 사용하여이를 수행하는 방법 :

index.html

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

Main.CSS

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}

CSS Add에서 콘텐츠 DIV의 높이를 최대화하려는 경우

높이 : 100%;

#footer {
 clear: both;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top