[html] CSS 만 사용하여 HTML 요소가 나머지 화면 높이의 100 %를 어떻게 채울 수 있습니까?

Program / 글쓴이

헤더 요소와 콘텐츠 요소가 있습니다.

#header
#content

헤더는 고정 높이이고 콘텐츠는 화면에서 사용 가능한 나머지 높이를 모두 overflow-y: scroll;.

Javascript없이 가능합니까?

답변

이에 대한 트릭은 html 및 body 요소에 100 % 높이를 지정하는 것입니다. 일부 브라우저는 높이를 계산하기 위해 상위 요소 (html, body)를 찾습니다.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

답변

모든 대답을 잊어 버리십시오.이 CSS 줄은 2 초 만에 저에게 효과적이었습니다.

height:100vh;

1vh = 브라우저 화면 높이의 1 %

출처

반응 형 레이아웃 크기 조정의 경우 다음을 사용할 수 있습니다.

min-height: 100vh

[2018 년 11 월 업데이트]
댓글에서 언급했듯이 최소 높이를 사용하면 반응 형 디자인에 문제가 발생하지 않을 수 있습니다.

[2018 년 4 월 업데이트] 댓글에서 언급했듯이 질문이 제기 된 2011 년에 모든 브라우저가 뷰포트 단위를 지원하지는 않았습니다. 다른 답변은 당시 솔루션 vmax이었습니다. IE에서는 여전히 지원되지 않으므로 아직 모두에게 최상의 솔루션이 아닐 수도 있습니다.

답변

실제로 가장 좋은 방법은 다음과 같습니다.

html {
    height:100%;
}
body {
    min-height:100%;
}

이것은 나를 위해 모든 것을 해결하고 바닥 글을 제어하는 ​​데 도움이되며 페이지가 아래로 스크롤 되더라도 고정 바닥 글을 가질 수 있습니다.

기술 솔루션-편집 됨

역사적으로 ‘높이’는 가장 쉬운 ‘너비’에 비해 성형하기가 까다 롭습니다. CSS <body>는 스타일링이 작동하는 데 중점을 둡니다 . 위의 코드-우리가 준 <html>것과 <body>높이. 이것은 마술이 등장하는 곳입니다. 우리는 테이블에 ‘최소 높이’ <body>가 <html>있기 때문에 브라우저 <body>에 최소 높이를 유지 하기 때문에 더 우월하다고 말하고 있습니다. 이것은 이미 높이가 이미 있기 때문에 <body>재정의를 허용 합니다 . 다시 말해, 우리는 브라우저를 속여서 테이블에서 “범핑” 하여 독립적으로 스타일을 지정할 수 있습니다.<html><html><html>

답변

min-height 속성에 vh를 사용할 수 있습니다.

min-height: 100vh;

여백을 사용하는 방법에 따라 다음과 같이 할 수 있습니다.

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

답변

허용 된 솔루션은 실제로 작동하지 않습니다. 콘텐츠 div가 부모의 높이와 같음을 알 수 있습니다 body. 따라서 body높이를 100%로 설정하면 브라우저 창의 높이와 동일하게 설정됩니다. 768px콘텐츠 div높이를 로 설정 하면 브라우저 창이 높이에 있다고 가정 100%하면 div의 높이는 768px. 따라서 헤더 div는 150px이고 콘텐츠 div는 768px. 결국 150px페이지 하단 아래에 콘텐츠가 있습니다 . 다른 솔루션은 이 링크를 확인 하십시오.

답변

HTML5를 사용하면 다음을 수행 할 수 있습니다.

CSS :

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML :

<header>blabablalba </header>
<section> Content </section>

답변

나를 위해 다음은 잘 작동했습니다.

헤더와 콘텐츠를 div에 래핑했습니다.

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

이 참조 를 사용하여 높이를 flexbox로 채웠습니다. CSS는 다음과 같습니다.

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

flexbox 기술에 대한 자세한 내용은 참조를 방문하십시오.