최소 높이 100% CSS 레이아웃

최소 높이 100% CSS 레이아웃

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

특히 다음과 같은 레이아웃이 있는 경우header그리고.footerheight,

을 어떻게 할까요?100%그 사이의 공간의footer바닥에 고정되어 있습니까?

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

최소 높이

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

상대 포지셔닝

#container는 상대적인 위치를 가지기 때문에 #footer는 항상 맨 아래에 유지됩니다. 위에서 언급한 최소 높이는 #container의 스케일링을 방해하지 않기 때문에 #container가 #container를 강제로 #container가 길어지는 경우에도 작동합니다.

패딩-하단

더 이상 정상 흐름이 아니므로 #content의 패딩-하단은 이제 절대 #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 노드인 상위노상는동안백분올작로동다니합바게르율속하드를▁to를 상속합니다.min-height 노드의 높이를 노높를다설정것는입하다니로음으이상으로 입니다.1px그고나서아이의리이아▁and의.min-height올바르게 작동합니다.

데모 페이지

html {
  height: 100%
}

body {
  min-height: 100%;
  height: 1px;
}

div {
  background: blue;
  min-height: 100%;
  height: 1px;
}

div div {
  background: red;
  min-height: 100%;
  width: 50px;
}

<div>
  <div>
  </div>
</div>

한 A 어퓨.CSS해결책해▁((#content { min-height: 100%; })는에 효과가 있는 것은 - 의 경우에 효과가 있습니다

유감스럽게도 원하는 동작을 얻으려면 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%로 설정되어 있기 때문에 100%로 설정할 수 없으며, 이는 클리어 기능을 사용할 때 바닥글이 아래로 밀린다는 것을 의미합니다.

헤더가 50px 높이이고 바닥글이 50px 높이이며 콘텐츠가 나머지 공간(예: 100px)에 자동으로 장착되어 있고 페이지 컨테이너가 이 값의 100%인 경우 높이가 200px가 될 것입니다.그런 다음 사이드바 높이를 100%로 설정하면 머리글과 바닥글 사이에 끼워야 하지만 200px가 됩니다.대신 사이드바가 페이지 컨테이너와 동일한 높이로 설정되어 있기 때문에 50px + 200px + 50px가 되므로 페이지는 이제 300px가 됩니다.페이지 내용에 큰 공백이 있을 것입니다.

저는 인터넷 익스플로러 9을 사용하고 있는데 이것이 제가 이 100% 방법을 사용했을 때 받는 효과입니다.저는 다른 브라우저에서 시도해 본 적이 없으며 다른 옵션 중 일부에서 작동할 수 있다고 생각합니다. 하지만 보편적이지는 않을 것입니다.

먼다을생야합니다해를 합니다.div와 함께id='footer'당신의 신당뒤 content이렇게 .div 다음간 이하것세을요히단에▁div.

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

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

그리고 CSS:

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

사용해 보십시오.

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

그div 아래 는 div 콘텐츠 아래에 있어야 .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; }

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

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

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

Afshin Mehrabani의 답변에서 언급한 것처럼, 본문과 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);
}

MDN 문서에 지정된 높이 속성은 상속되지 않습니다.그래서 100%로 설정하기 위해 필요합니다.웹 페이지가 html로 시작한 다음 본문을 자식으로 하는 것으로 알려져 있으므로 높이를 모두 100%로 설정해야 합니다.

html,
   body {
     height: 100%;
   }

<html>
  <body>

  </body>
</html>

그리고 키가 100%로 표시된 모든 아이는 부모 키의 100 부분이 될 것입니다.위의 예제 스타일에서 html 태그를 100%로 설정하면 사용 가능한 화면 높이의 전체 높이가 됩니다.그러면 본문이 100%가 되고 부모가 html이기 때문에 전체 높이가 됩니다.

언급URL : https://stackoverflow.com/questions/25238/100-min-height-css-layout