본문이 브라우저 높이의 100 %가되도록합니다.

본문이 브라우저 높이의 100 %가되도록합니다.

---

본문을 브라우저 높이의 100 %로 만들고 싶습니다. CSS를 사용하여 할 수 있습니까?

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

전체 브라우저 창을 채울 페이지의 배경색을 설정하고 싶지만 페이지에 내용이 거의없는 경우 하단에보기 흉한 흰색 막대가 나타납니다.

---

html 요소의 높이도 100 %로 설정해보십시오.

html, 
body {
    height: 100%;
}

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

그러나 body의 내용은 아마도 동적으로 변경되어야 할 것입니다. 최소 높이를 100 %로 설정하면이 목표를 달성 할 수 있습니다.

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

---

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

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

뷰포트 백분율 길이는 초기 포함 블록의 크기에 상대적입니다. 초기 컨테 이닝 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.

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

여기에 예

body {
    height: 100vh;
}

body {
    min-height: 100vh;
}

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

---

배경 이미지가있는 경우 대신 설정하는 것이 좋습니다.

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

이렇게하면 콘텐츠가 뷰포트보다 클 때 body 태그가 계속 커질 수 있고 아래로 스크롤하기 시작할 때 배경 이미지가 계속 반복 / 스크롤 / 무엇이든지 계속됩니다.

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

---

본문에 여백을 유지하고 스크롤 막대를 원하지 않는 경우 다음 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 에서 데모를 참조하십시오 .

---

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

---

내가 사용하는 모든 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 요소가 브라우저 기본값으로 인해 HTML 및 BODY 요소가 자동으로 모든 요소를 ​​아래 또는 오른쪽으로 밀어 내지 않도록합니다.

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

이 솔루션은 또한 내가 몇 년 전 HTML과 CSS를 처음 시작했을 때했던 것처럼 브라우저 창의 모서리에 맞도록 처음에 <div>a margin:-8px;를 줄 필요가 없음을 의미합니다 .

---

게시하기 전에 다른 전체 화면 CSS 프로젝트를 살펴 보았는데 거기에서 사용한 모든 것이 body{margin:0;}2 년 동안 잘 작동하고 있다는 사실을 발견했습니다.

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

---

다양한 시나리오를 테스트 한 후 이것이 최상의 솔루션이라고 생각합니다.

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/

As you scroll, notice the repeating background? This is happening because the body element's height has NOT increased due to its child table overflowing. Why doesn't it expand like any other block element? I'm not sure. I think browsers handle this incorrectly.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Setting a min-height of 100% on the body as shown above causes other problems. If you do this, you cannot specify that a child div or table take up a percentage height as shown here:

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

Hope this helps someone. I think browsers are handling this incorrectly. I would expect the body's height to automatically adjust growing larger if its children overflow. However, that doesn't seem to happen when you use 100% height and 100% width.

---

A quick update

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

A better solution with today's CSS

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

---

Here:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

---

Please check this:

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

Or try new method Viewport height :

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

Viewport: If your using viewport means whatever size screen content will come full height fo the screen.

---

You can also use JS if needed

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

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

---

Try

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

---

Only with 1 line of CSS… You can get this done.

body{ height: 100vh; }

---

If you don't want the work of editing your own CSS file and define the height rules by yourself, the most typical CSS frameworks also solve this issue with the body element filling the entirety of the page, among other issues, at ease with multiple sizes of viewports.

For example, Tacit CSS framework solves this issue out of the box, where you don't need to define any CSS rules and classes and you just include the CSS file in your HTML.

---

Try adding:

body {
height: 100vh;
}

---

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%
}

Works for all major browsers: FF, Chrome, Opera, IE9+. Works with Background images and gradients. Scrollbars are available as content needs.

---

I would use this

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

<html>
    <body>
    </body>
</html>

The browser will use min-height: 100vh and if somehow the browser is a little older the min-height: 100% will be the fallback.

The overflow: auto is necessary if you want the body and html to expand their height when you resize the screen (to a mobile size for example)

---

all answers are 100% correct and well explained, but i did something good and very simple to make it responsive.

here the element will take 100% height of view port but when it comes to mobile view it don't look good specially on portrait view ( mobile ), so when view port is getting smaller the element will collapse and overlap on each other. so to make it little responsive here is code. hope someone will get help from this.

<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>

here is JSfiddle Demo.

---

Here Update

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

---

About the extra space at the bottom: is your page an ASP.NET application? If so, there is probably a wrapping almost everything in your markup. Don't forget to style the form as well. Adding overflow:hidden; to the form might remove the extra space at the bottom.

---

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

---

CSS3 has a new method.

 height:100vh

It makes ViewPort 100% equal to the height.

So your Code should be

 body{
 height:100vh; 
 }

참고URL : https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height