바디 높이를 브라우저 높이의 100 %로 설정

844

본문에 브라우저 높이가 100 %가되도록하고 싶습니다. CSS를 사용하여 그렇게 할 수 있습니까?

설정을 시도했지만 height: 100%작동하지 않습니다.

전체 브라우저 창을 채우도록 페이지의 배경색을 설정하고 싶지만 페이지에 내용이 거의 없으면 아래쪽에 못생긴 흰색 막대가 나타납니다.

html  css  height 
— 몸매
소스
2
— Josh Crozier

답변:

1090

html 요소의 높이를 100 %로 설정하십시오. 

html, 
body {
    height: 100%;
}

Body는 동적 속성의 크기를 조정하는 방법에 대해 부모 (HTML)를 확인하므로 HTML 요소의 높이도 설정해야합니다.

그러나 본문 내용은 동적으로 변경해야 할 것입니다. 최소 높이를 100 %로 설정하면이 목표를 달성 할 수 있습니다.

html {
  height: 100%;
}
body {
  min-height: 100%;
}
— 벤트 온 코딩
소스
6
고마워, 이것은 짧은 페이지에서 흰색 막대를 제거하는 것처럼 보이지만 이제는 높이가 브라우저 창 높이를 초과하는 페이지에서 아래쪽에 20px 흰색 막대가 나타납니다. |
— bodyofheat
48
알았어! html, body {min-height : 100 %;} : D
— bodyofheat
12
참고 : body {min-height}버전을 사용하면 .body-child{height: 100%}트릭을 사용할 수 없습니다 .
— Salman A
14
가장 좋은 대답은 CSS3, 사용 함께 vh> - body { height: 100vh }여기에 체크 대답 - stackoverflow.com/a/25829844/2680216
— 아드리아누 센드
2
@bFunc이 크롬 문제가 있습니다. html {height : 100 %;} body {height : auto}가 작업을 수행합니다.
— GBMan
217

html및 body요소 높이를 모두로 설정하는 대신 100%뷰포트 백분율 길이를 사용할 수도 있습니다.

5.1.2. 뷰포트 백분율 길이 : 'vw', 'vh', 'vmin', 'vmax'단위

뷰포트 백분율 길이는 초기 포함 블록의 크기를 기준으로합니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.

이 경우 100vh뷰포트의 높이 인 값을 사용할 수 있습니다 .

여기 예

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

이것은 대부분의 최신 브라우저에서 지원되며 여기에서 지원을 찾을 수 있습니다 .

— 조쉬 크로 지어
소스
4
이것이 간단하다는 사실 외에도 새로운 관행을 채택하는 것도 좋습니다.
— Pan Wangperawong 2016 년
3
@niaster 확실히 동의합니다. 내가 :) 물론이 답변을 게시 이후 브라우저 지원은 이미 개선
— 조쉬 Crozier가
1
@incarnate 예 .. 너무 나쁘지는 않습니다 :) OP가 온라인에 마지막으로 7/11/11에 있었던 것처럼 보입니다 (질문이 요청 된 날짜입니다.) 그래서 나는 그것이 바뀔 것이라고 의심합니다.
— Josh Crozier
18
이전 관행이 제대로 작동 할 때 왜 "새로운 관행 채택"을 시작해야하는지 잘 모르겠습니다. 코드를 작게하거나 성능을 향상 시키거나 vw / vh를 지원하지 않는 브라우저가 여전히 있습니다.
— cimmanon 23
3
Chrome 사용자 에이전트 스타일 시트는 기본적으로 본문에 8px 여백을 추가합니다 (다른 브라우저는 확실하지 않음) margin: 0;. 오른쪽에 지속적인 세로 스크롤 막대를 피하기 위해 추가 해야했습니다.
— Andy Raddatz
121

배경 이미지가있는 경우이를 대신 설정해야합니다.

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

이렇게하면 내용이 뷰포트보다 클 때 본문 태그가 계속 커지도록하고 스크롤을 시작할 때 배경 이미지가 계속 반복 / 스크롤 / 이동할 수 있습니다.

당신이 IE6를 지원해야 할 경우에 쐐기하는 방법을 찾아야합니다 기억 height:100%몸을, IE6의 취급이 height좋아 min-height어쨌든.

— 화난 댄
소스
(body> #의 인 flexbox - 래퍼)을 마우스 오른쪽 몸에서 글로벌 인 flexbox이있는 경우 또한 작동
— justnorris
2
내용이 단일 화면보다 길어질수록 허용되는 답변이 커지지 않으므로 정답입니다.
— SimplGy
화난 댄 고마워, 내 사이트 하단에 못생긴 공백이 없어졌어!
— 보리스 Burkov
물론,이 질문이 제기 되었기 때문에, 뷰 포트 기반 치수는 Thing이되었습니다. 이제 당신은 할 수 있습니다body{min-height: 100vh}
— Angry Dan
또한 필요 body { height: auto; }파이어 폭스에 표시되지에 스크롤바를 위해. 그 외에는 완벽하게 작동합니다.
— Torxed
82

본문에 여백을 유지하고 스크롤 막대를 원하지 않는 경우 다음 CSS를 사용하십시오.

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

설정 body {min-height:100%} 하면 스크롤 막대가 나타납니다.

http://jsbin.com/aCaDahEK/2/edit?html,output 데모를 참조하십시오 .

— 다니엘 파투
소스
7
유일한 작업 답변 주셔서 감사합니다 :) 나는 '절대'가 작동한다고 가정합니다
— Dmitry Matveev
스크롤 막대가없는 Firefox에서 잘 작동합니다. 감사합니다. 수락 된 답변은 그렇지 않습니다.
— Andrew
@Andrew 이상하게도 FireFox의 스크롤 막대가 나타납니다. 당신이 허용 대답에 그러나 필요한 것은 height: auto;에 body지금 팝업 절뿐만 아니라위한 스크롤바.
— Torxed
@Torxed FireFox에도 여전히 스크롤 막대가 나타납니다. 자동 설정을 높이에 추가해도 효과가없는 것 같습니다 :(
— Travis Crum
Chrome 56.0.2924.87 (64 비트)에서는이 기능이 작동하지 않습니다.
— Ryan
30 
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
— 메기
소스
24

다양한 시나리오를 테스트 한 후 이것이 최선의 해결책이라고 생각합니다.

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

내용이 넘치면 html및 body요소가 자동으로 확장 된다는 점에서 동적입니다 . 최신 버전의 Firefox, Chrome 및 IE 11에서 테스트했습니다.

여기에서 전체 바이올린을보십시오 (테이블 싫어하는 사람들을 위해 항상 div를 사용하도록 변경할 수 있습니다).

https://jsfiddle.net/71yp4rh1/9/

그것을 말하면서 여기에 게시 된 답변에 몇 가지 문제가 있습니다 .

html, body {
    height: 100%;
}

위의 CSS를 사용하면 다음과 같이 내용이 오버플로되면 html과 body 요소가 자동으로 확장되지 않습니다.

https://jsfiddle.net/9vyy620m/4/

스크롤 할 때 반복되는 배경에 주목하십니까? 자식 테이블 오버플로로 인해 본문 요소의 높이가 증가하지 않았기 때문에 발생합니다. 다른 블록 요소처럼 확장되지 않는 이유는 무엇입니까? 잘 모르겠습니다. 브라우저가 이것을 잘못 처리한다고 생각합니다.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

위에 표시된대로 신체에 최소 높이를 100 %로 설정하면 다른 문제가 발생합니다. 이렇게하면 다음과 같이 자식 div 또는 테이블이 백분율 높이를 차지하도록 지정할 수 없습니다.

https://jsfiddle.net/aq74v2v7/4/

이것이 누군가를 돕기를 바랍니다. 브라우저가 이것을 잘못 처리하고 있다고 생각합니다. 아이들이 넘치면 몸의 높이가 자동으로 커짐에 따라 조정됩니다. 그러나 100 % 높이와 100 % 너비를 사용하면 발생하지 않는 것 같습니다.

— 개인적인
소스
3
이 페이지에서 투표가 많은 답변을 모두 시도했지만 아무도 효과가 없었습니다. 이거 했어요!
— Ryan
이 답변은 받아 들여 져야합니다. 는 height: 100vh해결책도 아니다. 상단 컨테이너를 100vh높게 설정 100vw하고 컨테이너에 스크롤 막대가있는 경우 문제가 발생할 수 있습니다. 그러면 컨테이너가 스크롤 막대보다 커지고 스크롤 막대가 불필요하게 표시 될 수 있습니다. height: 100vh컨테이너가 화면 자체보다 더 큰 것, 그리고 문서 본문에 불필요한 세로 스크롤 막대를 만들 것 최신 안드로이드 기기 (안드로이드 9 예 샤오 미 미 9)에 우리 또한 인한 문제.
— jtompl
21

문자 그대로 모든 CSS 파일을 시작할 때 사용하는 것은 다음과 같습니다.

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

여백이 0이면 HTML 및 BODY 요소가 왼쪽 또는 오른쪽에 약간의 공간을 갖도록 브라우저에 의해 자동 배치되지 않습니다.

0으로 채워지면 HTML 및 BODY 요소가 브라우저 기본값으로 인해 요소 내부의 모든 것을 자동으로 아래로 또는 아래로 밀지 않도록합니다.

너비와 높이 변형은 100 %로 설정되어있어 실제로 자동 설정 여백 또는 패딩이있을 것으로 예상하여 브라우저가 크기를 조정하지 않도록합니다. 아마 필요하지 않을 것입니다.

이 솔루션은 또한 몇 년 전에 HTML과 CSS를 처음 시작했을 때와 마찬가지로 브라우저 창의 모서리에 처음 <div>으로 margin:-8px;맞출 필요가 없다는 것을 의미합니다 .

게시하기 전에 다른 전체 화면 CSS 프로젝트를 살펴본 결과 내가 사용했던 모든 body{margin:0;}작업이 2 년 동안 제대로 진행된 것 외에는 아무것도 없다는 것을 알았습니다.

이 자세한 답변이 도움이 되길 바랍니다. 내 눈에 브라우저가 body / html 요소의 왼쪽과 때로는 위쪽에 보이지 않는 경계를 설정해야한다는 것은 바보입니다.

— 마인 앤 크래프트 12
소스
width: 100%body 및 html 요소 의 가능한 목적은 무엇인지 설명해 주 시겠습니까? 그렇습니다, 나는 실제적인 관점 body { margin: 0; }에서 대부분의 경우 충분해야 한다는 것을 이해 합니다. 더 철저하게 이해하고 싶습니다.
— john cj
21

빠른 업데이트

html, body{
    min-height:100%;
    overflow:auto;
}

오늘날의 CSS로 더 나은 솔루션

html, body{ 
  min-height: 100vh;
  overflow: auto;
}
— 자이언트 버 시니
소스
2
이것이 기존 답변과 다른 점을 어떻게 제공합니까?
— cimmanon
3
나는 다른 사람들도 시도했지만 나를 위해 일하지 않았다. 이것은 효과가 있었으므로 필요한 사람에게 해결책이 될 수 있습니다. @cimmanon
— Jayant Varshney
나는 이것이 다른 높은 투표 답변 이외의 나를 위해 작동한다고 말해야합니다. overflow: auto여기 마술을하십시오. Btw Chrome을 사용합니다.
— SkuraZZ
오버플로 된 내용의 높이를 조정할 수있는 옵션 (찾았습니다).
— Daniel Sharp
6

여기:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}
— 에디
소스
4

필요한 경우 JS를 사용할 수도 있습니다

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
— 허브
소스
그러나 이것을 위해서는 jQuery 라이브러리와 같은 것보다 더 많은 것을 추가하고 JavaScript로 작성해야하며 CSS에서 수행 할 수 있습니다.
— 프론트 엔드 개발자
3

시험

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
— Ak-SE
소스
2
width: 100%body 및 html 요소 의 가능한 목적은 무엇인지 설명해 주 시겠습니까? 그렇습니다, 나는 실제적인 관점 body { margin: 0; }에서 대부분의 경우 충분해야 한다는 것을 이해 합니다. 더 철저하게 이해하고 싶습니다.
— john cj
3

이것을 확인하십시오 :

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

또는 새로운 방법으로 뷰포트 높이를 사용해보십시오.

html, body { width: 100vw; height: 100vh;}

뷰포트 : 사용하는 뷰포트가 어떤 크기의 화면 내용이 화면의 전체 높이가 될지를 의미하는 경우.

— 아야 판 K
소스
이 답변을 찾은 다른 사람들이 이해할 수 있도록 솔루션에 대한 설명을 포함하십시오. 감사!
— Shawn
width: 100%body 및 html 요소 의 가능한 목적은 무엇인지 설명해 주 시겠습니까?
— john cj
그래서 1000에서 9999 사이의 숫자를 가진 50 개의 열과 1000 개의 행을 가진 테이블을 가지고 있다고 가정 해 봅시다. 그것들은 우리가 정상적으로하는 것처럼 창 너머로 스크롤되거나 오버플로 유형 스크롤 막대가
— 있습니까?
3

자신의 CSS 파일을 편집하지 않고 직접 높이 규칙을 정의하지 않으려는 경우 가장 일반적인 CSS 프레임 워크는 본문 요소를 사용하여 페이지 전체를 채우는 본문 요소를 사용하여이 문제를 쉽게 해결할 수 있습니다. 뷰포트의 크기.

예를 들어, Tacit CSS 프레임 워크는 CSS 규칙과 클래스를 정의 할 필요가없고 HTML에 CSS 파일 만 포함시키는이 문제를 즉시 해결합니다.

— Filipe Freire
소스
2 
html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

FF, Chrome, Opera, IE9 +와 같은 모든 주요 브라우저에서 작동합니다. 배경 이미지 및 그라디언트와 함께 작동합니다. 컨텐츠 필요에 따라 스크롤바를 사용할 수 있습니다.

— 코니
소스
2

나는 이것을 사용할 것이다 

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }
<html>
    <body>
    </body>
</html>
스 니펫 확장

브라우저가 사용 min-height: 100vh하고 어떻게 든 브라우저가 조금 더 오래된 min-height: 100%경우 폴 백이됩니다.

은 overflow: auto당신이 몸을 원하는 HTML을하면 (예를 들어, 모바일 크기) 화면 크기를 조정할 때 자신의 높이를 확장하는 경우에 필요하다

— medBouzid
소스
1

모든 답변은 100 % 정확하고 잘 설명되어 있지만 반응이 좋도록 매우 간단하고 좋은 일을했습니다.

여기서 요소는 100 % 높이의 뷰 포트를 사용하지만 모바일 뷰의 경우 세로 뷰 (mobile)에서는 특별히 좋아 보이지 않으므로 뷰 포트가 작아지면 요소가 서로 겹치거나 겹칩니다. 반응이 거의없는 것은 코드입니다. 누군가가 이것으로부터 도움을 얻을 수 있기를 바랍니다.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

여기 JSfiddle 데모가 있습니다.

— wasimv09
소스
0

여기 업데이트

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
— 안부 라즈
소스
-1

하단의 추가 공간 정보 : 페이지가 ASP.NET 응용 프로그램입니까? 그렇다면 마크 업에 거의 모든 것이 래핑되어있을 수 있습니다. 양식의 스타일도 잊지 마십시오. 추가 overflow:hidden;양식은 하단에있는 여분의 공간을 제거 할 수 있습니다.

— cockypup
소스
6
정말 좋은 이유가 없으면 overflow : hidden을 사용하지 않는 것이 좋습니다. 상황이 범람하는 이유를 찾기 및 조정이 오버 플로우 대신하지 않도록
— jontro
-1 
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }
— 차단기를 상상해보십시오
소스
width: 100%body 및 html 요소 의 가능한 목적은 무엇인지 설명해 주 시겠습니까? 그렇습니다, 나는 실제적인 관점 body { margin: 0; }에서 대부분의 경우 충분해야 한다는 것을 이해 합니다. 더 철저하게 이해하고 싶습니다.
— john cj
-5

CSS3에는 새로운 방법이 있습니다.

 height:100vh

ViewPort를 높이와 100 % 동일하게 만듭니다.

따라서 코드는 

 body{
 height:100vh; 
 }
— 실바 차 투라
소스
5
1 년 전 9 월에 게시 한 답변 과 다른 점은 무엇입니까?
— Josh Crozier
1
왜 두 번 대답하니?
— Adriano Resende
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.