100 % 최소 높이 CSS 레이아웃

광범위한 브라우저에서 최소 100 % 높이의 요소를 만드는 가장 좋은 방법은 무엇입니까?

특히 header및 footer의 레이아웃이있는 height경우

바닥에 고정 된 부분 100%사이의 공간을 중간 내용 부분으로 채우는 방법 은 footer무엇입니까?

나는 다음 중 하나를 사용하고 있습니다 : CSS 레이아웃-100 % 높이

최소 높이

이 페이지의 #container 요소는 최소 높이가 100 %입니다. 이렇게하면 콘텐츠가 뷰포트가 제공하는 것보다 더 많은 높이를 요구할 경우 #content의 높이는 # 컨테이너도 길어지게합니다. #content의 가능한 열을 #container의 배경 이미지로 시각화 할 수 있습니다. div는 테이블 셀이 아니며 이러한 시각적 효과를 만들기 위해 실제 요소가 필요하지 않습니다. 아직 확신이 없다면; 직선과 단순한 색 구성표 대신 흔들리는 선과 ​​그라데이션을 생각하십시오.

상대 위치

#container는 상대적 위치를 가지므로 #footer는 항상 맨 아래에 유지됩니다. 위에서 언급 한 최소 높이로 # 컨테이너가 확장되는 것을 막을 수 없기 때문에 # 컨텐더가 # 컨테이너를 더 길게 만들더라도 작동합니다.

패딩 바닥

더 이상 일반 흐름에 있지 않기 때문에 #content의 padding-bottom은 이제 절대 #footer를위한 공간을 제공합니다. 이 패딩은 기본적으로 스크롤 된 높이에 포함되므로 바닥 글이 위의 내용과 겹치지 않습니다.

이 레이아웃을 테스트하려면 텍스트 크기를 약간 조정하거나 브라우저 창의 크기를 조정하십시오.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

나를 위해 잘 작동합니다.

커스텀 높이를 어딘가에 고정하려면 :

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

여기에 따라 다른 해결책이다 vh, 또는 viewpoint height자세한 내용은 방문을 위해, CSS 단위 . 대신 flex를 사용하는 이 솔루션을 기반으로합니다 .

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

단위는 vw, vh, vmax, vmin입니다. 기본적으로 각 단위는 뷰포트 크기의 1 %입니다. 따라서 뷰포트가 변경되면 브라우저는 해당 값을 계산하고 그에 따라 조정합니다.

자세한 내용은 여기를 참조 하십시오.

구체적으로 특별히:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

kleolb02의 대답은 꽤 좋아 보입니다. 또 다른 방법은 끈적 끈적한 바닥 글 과 최소 높이 핵 의 조합입니다.

들어 min-height제대로 백분율로 작업에 그것의 부모 노드를 계승하면서 min-height, 트릭에 부모 노드의 높이를 설정하는 것입니다 1px후 자녀의는 min-height제대로 작동합니다.

데모 페이지

순수한 CSS솔루션 ( #content { min-height: 100%; })은 많은 경우에 작동하지만 모든 경우, 특히 IE6 및 IE7에서는 작동하지 않습니다.

불행히도 원하는 동작을 얻으려면 JavaScript 솔루션을 사용해야합니다. 콘텐츠의 원하는 높이를 계산하고 <div>함수에서 CSS 속성으로 설정하면됩니다.

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

그런 다음이 함수를 onLoad및 onResize이벤트 처리기로 설정할 수 있습니다 .

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

부모 컨테이너가 사이드 바가 있고 바닥 글을 채우기 위해 공간을 채우고 싶다면 부모가 100 %로 설정되어 있기 때문에 Levik에 동의합니다. 바닥 글은 부모 높이의 100 %이기 때문에 100 %로 설정할 수 없습니다. clear 기능을 사용할 때 바닥 글이 눌려지는 것을 의미합니다.

머리글의 높이가 50px이고 바닥 글의 높이가 50px이고 콘텐츠가 100px와 같은 나머지 공간에 자동 맞춤되고 페이지 컨테이너 가이 값의 100 %이고 높이가 200px 인 경우이 방법을 생각하십시오. 그런 다음 세로 막대 높이를 100 %로 설정하면 머리글과 바닥 글 사이에 꼭 맞아야하더라도 200px입니다. 대신 50px + 200px + 50px가되므로 사이드 바는 페이지 컨테이너와 동일한 높이로 설정되므로 페이지는 이제 300px입니다. 페이지 내용에 큰 공백이 있습니다.

Internet Explorer 9을 사용하고 있으며이 100 % 방법을 사용할 때 효과가 나타납니다. 다른 브라우저에서 시도하지 않았으며 다른 옵션 중 일부에서 작동한다고 가정합니다. 그러나 보편적이지 않습니다.

먼저 div 뒤에 divwith id='footer'를 content만든 다음 간단히 수행하십시오.

HTML은 다음과 같아야합니다.

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

그리고 CSS :

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

아마도 가장 짧은 솔루션 (현대 브라우저에서만 작동)

이 작은 CSS 조각은 "the middle content part fill 100% of the space in between with the footer fixed to the bottom"다음을 만듭니다 .

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

유일한 요구 사항은 고정 높이 바닥 글이 있어야한다는 것입니다.

이 레이아웃의 예를 들면 다음과 같습니다.

<html><head></head><body>
  <main> your main content </main>
  </footer> your footer content </footer>
</body></html>

이 CSS가 필요합니다 :

html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; }

이 시도:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

divcontent div 아래 의 요소는을 가져야 clear:both합니다.

당신은 이것을 시도 할 수 있습니다 : http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ 그것은 100 % 높이와 수평 중심입니다.

내가 사용한 것을 공유하고 잘 작동합니다.

#content{
        height: auto;
        min-height:350px;
}

Afshin Mehrabani의 답변에서 언급했듯이 body와 html의 높이를 100 %로 설정해야하지만 바닥 글을 얻으려면 래퍼의 높이를 계산하십시오.

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}