Make body have 100% of the browser height

Question

I want to make body have 100% of the browser height. Can I do that using CSS?

I tried setting height: 100%, but it doesn't work.

I want to set a background color for a page to fill the entire browser window, but if the page has little content I get a ugly white bar at the bottom.

[CSS3 Viewport-percentage lengths](http://stackoverflow.com/a/25829844/2680216) — Josh Crozier, Jan 16 '15 at 04:00

score 1218 · Accepted Answer · edited Sep 27 '19 at 15:33

1218

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

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

edited Sep 27 '19 at 15:33

Nick Heiner

108,809
177
454
689

answered Jul 11 '11 at 18:53

BentOnCoding

23,888
10
59
92

7

thanks, this seem to remove the white bar on short pages, but now on pages which height exceeds the browser window height I get a 20px white bar at the bottom :| – bodyofheat Jul 11 '11 at 19:01
57

ok I found out! it works if I add html,body{min-height:100%;} :D – bodyofheat Jul 11 '11 at 19:32
1

Make a website with this as the only text on it. This is beyond useful for beginning web designers. – notbad.jpeg Jul 26 '12 at 19:03
15

Note: if you use the `body {min-height}` version then you cannot use `.body-child{height: 100%}` trick. – Salman A Dec 06 '14 at 09:52
1

Why appear always the scroll bar? Down in the answare there is solution without this problem. But why min-height have this problem? – Gabrer Jan 15 '15 at 17:27
I had this white-bar-at-the-bottom-issue as well when trying this out yersterday. Setting an according padding to the body (padding: 10px; in my case) solved the issue. HTH – Till Kolditz Jan 27 '15 at 13:38
For all the people posting "It doesn't work for me". This is a known working solution. If you are having trouble, then I would guess that it is becuase of css in your application. – BentOnCoding Mar 25 '15 at 17:41
17

best answer is with CSS3, using `vh` -> `body { height: 100vh }` - check answer here http://stackoverflow.com/a/25829844/2680216 – Adriano Resende Oct 02 '15 at 17:53
2

@bFunc I have this chrome issue to. html{height:100%;} body {height:auto} do the job. – GBMan Apr 13 '16 at 08:49
min-height: 100% is not enough. If the page is embedded in an iframe it fails. https://jsfiddle.net/greggman/jbmaded2/ – gman May 05 '16 at 08:53
I think that's a very specific scenario, although the iframe really shouldn't make a difference. Maybe you are seeing a browser inconsistency ? – BentOnCoding May 05 '16 at 17:38
2

@AdrianoResende The problem with that is that on mobile browsers, the height of the address bar is included in the 100vh value. This leaves part of the body below the fold. With 100% height, you can exclude the address bar's height, so the entire body is visible. – Bastiaan ten Klooster Feb 17 '18 at 23:25
This method also disables the ability scroll. Folks use height: 100vh like the answer below. @bodyofheat please accept the below answer as it is now the better way of achieving this. – Mark Pieszak - Trilon.io Apr 03 '18 at 18:20
FWIW - This did not work for me when trying to resolve this issue in MS Edge. – theUtherSide Jun 04 '18 at 23:37
`html { height: 100%; }`. This 100% of what? – Mohammed Noureldin Jul 25 '18 at 11:16
@MohammedNoureldin 100% of the current document height aka the size of the browser. – BentOnCoding Jul 26 '18 at 21:35
Suggest using the `display: table` method lower down. This approach means children of the `body` cannot use `height: 100%` to fill the page. – daveaspinall Nov 05 '20 at 11:22

score 246 · Answer 2 · edited Jun 20 '20 at 09:12

246

As an alternative to setting both the html and body element's heights to 100%, you could also use viewport-percentage lengths.

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

In this instance, you could use the value 100vh - which is the height of the viewport.

Example Here

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

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

This is supported in most modern browsers - support can be found here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 14 '14 at 03:39

Josh Crozier

202,159
50
343
273

5

Besides the fact that this is dead simple, it's also good that we adopt new practices. – Pan Wangperawong Jun 29 '15 at 20:07
3

@niaster I definitely agree. Browser support has already improved since I posted this answer as well :) – Josh Crozier Jun 29 '15 at 20:12
2

@incarnate Yeah.. too bad it isn't :) It looks like the last time the OP was online was in 7/11/11 (the date the question was asked..) So I doubt that will change. – Josh Crozier Jul 07 '15 at 13:06
20

Not sure why we need to start "adopting new practices" when the old practice works fine. There's no advantage to doing this: the code is not smaller, nor does it perform any better, and there are still browsers out there that don't support vw/vh. – cimmanon Aug 03 '15 at 23:02
1

@BentOnCoding According to [this](http://caniuse.com/#feat=viewport-units), it works on a majority of mobile devices. I've never had any problems with it. Which devices/versions are your referring to? – Josh Crozier Nov 16 '15 at 16:42
1

On Apple tablets on Safari, this method is really buggy. – Luca Steeb Mar 10 '16 at 16:13
7

Chrome user agent stylesheet adds an 8px margin to body by default (not sure about other browsers), so I had to also add `margin: 0;` to avoid a persistent vertical scroll bar to the right. – Andy Raddatz Sep 12 '16 at 00:53
1

@cimmanon, the body height 100% didn't work for me with bootstrap. This solution worked. – Ronen Festinger Oct 30 '16 at 07:01
This didn't work for me in Chrome 56.0.2924.87 (64-bit). – Ryan Mar 07 '17 at 20:06
not working when you have another child which is bigger http://jsfiddle.net/dkdsfddz/266/ – Ahmed Ahmed Aug 11 '17 at 07:13
3

This solution results in extra scroll on mobile (Chrome, Android) because it calculates viewport height without taking the toolbar into account. – int_index Feb 04 '19 at 10:00
Exactly as @int_index is saying, this method will cause your page to gain an unnecessary vertical scrollbar in some browsers. Follow this answer instead https://stackoverflow.com/a/38908284/1860149 for a cross-browser solution. – jtompl Apr 03 '20 at 12:05
This is the only solution that worked for me. All my other elements are absolutely positioned. – JOATMON Apr 19 '20 at 14:38

score 128 · Answer 3 · answered Nov 01 '12 at 06:55

128

If you have a background image then you will want to set this instead:

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

This ensures that your body tag is allowed to continue growing when the content is taller than the viewport and that the background image continues to repeat/scroll/whatever when you start scrolling down.

Remember if you have to support IE6 you will need to find a way to wedge in height:100% for body, IE6 treats height like min-height anyway.

answered Nov 01 '12 at 06:55

Angry Dan

2,891
1
19
17

Also works when there is a global flexbox right under body (body > #flexbox-wrapper) – justnorris Jun 14 '13 at 12:41
4

This is the correct answer, as the accepted answer will not grow as content gets longer than a single screen. – SimplGy Jun 21 '13 at 22:10
Thank you so much, Angry Dan, that ugly white space at the bottom of my site is gone! – Boris Burkov May 07 '14 at 15:37
Of course, since this question was posed, view port based dimensions became a Thing. So now you can just do `body{min-height: 100vh}` – Angry Dan Jul 08 '15 at 15:39
You also need `body { height: auto; }` for scrollbars to not be shown in FireFox. other than that, works perfectly. – Torxed Jan 27 '16 at 13:09
This didn't work for me in Chrome 56.0.2924.87 (64-bit). – Ryan Mar 07 '17 at 20:04
I finally found an answer on this page that actually worked: http://stackoverflow.com/a/38908284/470749 – Ryan Mar 07 '17 at 20:31

score 87 · Answer 4 · answered Dec 01 '13 at 08:24

87

If you want to keep the margins on the body and don't want scroll bars, use the following css:

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

Setting body {min-height:100%} will give you scroll bars.

See demo at http://jsbin.com/aCaDahEK/2/edit?html,output .

answered Dec 01 '13 at 08:24

Daniel Patru

1,832
18
13

10

Thank you for the only working answer :) I assume 'absolute' made it work – Dmitry Matveev Jul 08 '14 at 10:14
Works well for me in Firefox without scrollbars, thank you. The accepted answer does not. – Andrew Jul 08 '15 at 08:00
@Andrew Oddly enough, this gives scroll-bars in FireFox. What you need however to the accepted answer is `height: auto;` in the `body` clause as well for scrollbars to now pop up. – Torxed Jan 27 '16 at 13:08
@Torxed I still get scroll bars in FireFox with this too. Adding the auto setting to height didn't seem to work for me :( – Travis Crum Feb 04 '16 at 20:25
This didn't work for me in Chrome 56.0.2924.87 (64-bit). – Ryan Mar 07 '17 at 20:04

score 44 · Answer 5 · edited Mar 02 '21 at 10:22

After testing various scenarios, I believe this is the best solution:

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

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

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

It is dynamic in that the html and the body elements will expand automatically if their contents overflow. I tested this in the latest version of Firefox, Chrome, and IE 11.

See the full fiddle here (for you table haters out there, you can always change it to use a div):

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

With that being said, there are several issues with the answers posted here.

html, body {
    height: 100%;
}

Using the above CSS will cause the html and the body element to NOT automatically expand if their contents overflow as shown here:

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.

I tried all of the high-voted answers on this page, but none worked. This one did! — Ryan, Mar 07 '17 at 20:31
This answer should be the accepted one. The `height: 100vh` is not a solution neither. Setting your top container to be `100vh` high and `100vw` might cause problems if the container has scrollbars - then it will larger than it should be (and might cause the scrollbars to be visible unnecessarily). The `height: 100vh` also caused problems for us on newer Android devices (e.g. Xiaomi Mi 9 with Android 9), where the container would be larger than the screen itself, and would make unnecessary vertical scrollbar to the document body. — jtompl, Apr 03 '20 at 12:04
I think body min-height and its child height problem is because you can not calculate the % value of dynamic property as min-height. Cause min-height is dynamic not static. — Čamo, May 07 '21 at 18:11
After 2 hours, this was the only solution that worked for me. Thank You! — Matteo, May 17 '21 at 19:40

score 32 · Answer 6 · edited Mar 19 '17 at 12:12

32

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

edited Mar 19 '17 at 12:12

Mori

7,904
14
55
82

answered Jul 11 '11 at 18:54

Catfish

17,019
47
183
323

Jayant Varshney · Answer 7 · 2018-08-19T18:01:56.727

27

A quick update

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

A better solution with today's CSS

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

edited Aug 19 '18 at 18:01

answered Aug 03 '15 at 22:49

Jayant Varshney

1,598
1
22
37

2

How does this offer anything different over the existing answers? – cimmanon Aug 03 '15 at 23:05
3

I have tried others also, but did not work for me. This one worked, so it can be a solution to someone needy. @cimmanon – Jayant Varshney Aug 04 '15 at 04:47
I have to say this one works for me other than other high vote answers. `overflow: auto` here do the magic. Btw I use Chrome. – SkuraZZ Oct 15 '18 at 06:36
Only option (I've found) which allows for overflowing content to resize the height. – Daniel Sharp May 18 '19 at 16:16
this is perfect answer if you're using float – Fathy Jul 24 '20 at 18:31

score 22 · Answer 8 · answered Oct 28 '15 at 02:32

What I use on the start of literally every CSS file I use is the following:

html, body{
    margin: 0;

    padding: 0;

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

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

The margin of 0 ensures that the HTML and BODY elements aren't being auto-positioned by the browser to have some space to the left or right of them.

The padding of 0 ensures that the HTML and BODY elements aren't automatically pushing everything inside them down or right because of browser defaults.

The width and height variants are set to 100% to ensure that the browser doesn't resize them in anticipation of actually having an auto-set margin or padding, with min and max set just in case some weird, unexplainable stuff happens, though you probably dont need them.

This solution also means that, like I did when I first started on HTML and CSS several years ago, you won't have to give your first <div> a margin:-8px; to make it fit in the corner of the browser window.

Before I posted, I looked at my other fullscreen CSS project and found that all I used there was just body{margin:0;} and nothing else, which has worked fine over the 2 years I've been working on it.

Hope this detailed answer helps, and I feel your pain. In my eyes, it is dumb that browsers should set an invisible boundary on the left and sometimes top side of the body/html elements.

Could you explain please, what is the possible purpose of `width: 100%` for body and html elements? Yes, I understand, that from practical point of view, `body { margin: 0; }` should be enough in most cases. I just want to understand more thoroughly. — john c. j., Jan 23 '17 at 17:37

score 6 · Answer 9 · answered Jul 11 '11 at 18:56

6

Here:

html,body{
    height:100%;
}

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

answered Jul 11 '11 at 18:56

Eddie

12,021
3
23
30

score 5 · Answer 10 · answered Nov 28 '16 at 15:04

5

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

answered Nov 28 '16 at 15:04

Herbs

127
2
8

But for this you need to add more things than needed like jQuery library and writing in JavaScript whilst this can be done in CSS. – Front-end Developer Nov 16 '17 at 23:21

score 4 · Answer 11 · answered Apr 10 '19 at 13:20

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)

score 3 · Answer 12 · answered Jan 20 '16 at 18:52

3

Try

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

answered Jan 20 '16 at 18:52

ak-SE

879
1
7
24

2

Could you explain please, what is the possible purpose of `width: 100%` for body and html elements? Yes, I understand, that from practical point of view, `body { margin: 0; }` should be enough in most cases. I just want to understand more thoroughly. – john c. j. Jan 23 '17 at 17:44

score 3 · Answer 13 · edited Nov 08 '16 at 19:16

3

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.

edited Nov 08 '16 at 19:16

ThomasThiebaud

9,015
4
43
66

answered Oct 26 '16 at 19:14

Ayyappan K

879
7
8

Please include an explanation of your solution so others who find this answer can understand. Thanks! – Shawn Oct 26 '16 at 19:37
Could you explain please, what is the possible purpose of `width: 100%` for body and html elements? – john c. j. Jan 23 '17 at 18:08
so lets say i have a table with 50 columns and 1000 rows having numbers between 1000 to 9999, what will happen to them, will they scroll beyond the window like we do normally or will they have an overflow type scrollbar – PirateApp Jul 15 '18 at 07:48

score 3 · Answer 14 · answered Mar 24 '18 at 09:59

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.

Corni · Answer 15 · 2015-03-25T08:42:56.180

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

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

edited Mar 25 '15 at 08:42

answered Mar 25 '15 at 08:16

Corni

547
4
14

score 1 · Answer 16 · answered Jun 23 '16 at 07:02

1

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

body{ height: 100vh; }

answered Jun 23 '16 at 07:02

Sanjib Debnath

1,912
1
15
14

6

Watch out for this. `100vh` is actually [not what you expect for iOS Safari.](https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html) – die maus Jan 13 '17 at 16:33

score 1 · Answer 17 · answered Dec 19 '17 at 06:48

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.

score 1 · Answer 18 · answered Jan 21 '21 at 21:54

There are some good answers here but also some misunderstandings. I support the following settings for modern browsers when styling for dimensions in web pages:

html {
    height: 100%; /* fallback for IE and older browsers */
    height: 100vh;
}

body {
    height: auto; /* required to allow content to expand vertically without overflow */
    width: auto;
    min-height: 100%; /* fallback for IE and older browsers */
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

For starters, the new viewport units ("vh") are redundant and not necessary as long as you have set html to a height of 100%. The reason is the body derives its values from the html parent. You can still use "vh" units in body to bypass the parent and get its property dimensions directly from the viewport. But its optional if html has 100% height.

Notice I've set body to height:auto. You do NOT want to set body height and width to 100%, or specific values as that limits content to the viewport's dimensions and there will be overflow. height:auto is your best friend in CSS! Using overflow:auto properties are not needed if you set height:auto on the body. That tells the page to let content expand height to any dimension necessary, even that beyond the viewport's height, if it needs to. It will not break out of the body dimensions. And it does allow scrolling as needed. auto also allows you to have margins and still support pages that fill the viewport using min-height. I believe height:auto is the default on body in most UA browser style sheets, anyway.

Adding min-height:100% then gives you the default height you want body to have and then allows the page dimensions to fill the viewport without content breaking out of the body. This works only because html has derived its height:100% based on the viewport.

The two CRITICAL pieces here are not the units, like % or vh, but making sure the root element, or html, is set to 100% of the viewport height. Second, its important that body have a min-height:100% or min-height:100vh so it starts out filling the viewport height, whatever that may be. Nothing else beyond that is needed. Notice I have added "fallback" properties for min-height, as many browsers post-2010 do not support "vh" units. Its fun to pretend everyone in the web world uses the latest and greatest but the reality is many legacy browsers are still around today in big corporate networks still use antiquated browsers that do not understand those new units.

STYLING HEIGHT FOR LEGACY BROWSERS

One of the things we forget is many very old browsers do not know how to fill the the viewport height correctly. Sadly, those legacy browsers simply had to have height:100% on both the html element and the body. If you did not do that, browser background colors and other weird visuals would flow up under content that did not fill the viewport. We solved that by delivering these 100% values only to older user-agents. If you are testing on a legacy browser, keep that in mind.

html  {
    height:100%;
}

body {
    height:100%;
    width:auto;
    margin:0;
    padding:0;
}

score 0 · Answer 19 · answered Jun 04 '18 at 06:56

0

Here Update

html
  {
    height:100%;
  }

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

answered Jun 04 '18 at 06:56

Anburaj_N

109
1
1
9

score 0 · Answer 20 · answered Dec 23 '20 at 04:12

I style the div container - usually the sole child of the body with the following css

.body-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

score -1 · Answer 21 · edited Oct 10 '13 at 03:46

-1

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.

edited Oct 10 '13 at 03:46

Josh Crozier

202,159
50
343
273

answered Apr 11 '13 at 20:58

cockypup

913
1
9
24

6

I do not recommend using overflow:hidden unless you have a really good reason. Find out why things are overflowing and adjust so it will not overflow instead – jontro Jan 19 '15 at 14:37

Imagine Breaker · Answer 22 · 2014-02-26T10:41:20.523

-1

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

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

edited Feb 26 '14 at 10:41

answered Feb 26 '14 at 10:35

Imagine Breaker

1,884
1
10
8

Could you explain please, what is the possible purpose of `width: 100%` for body and html elements? Yes, I understand, that from practical point of view, `body { margin: 0; }` should be enough in most cases. I just want to understand more thoroughly. – john c. j. Jan 23 '17 at 17:45

score -6 · Answer 23 · answered May 25 '15 at 05:04

-6

CSS3 has a new method.

 height:100vh

It makes ViewPort 100% equal to the height.

So your Code should be

 body{
 height:100vh; 
 }

answered May 25 '15 at 05:04

silvachathura

155
1
8

5

How is this different than [**the answer**](http://stackoverflow.com/a/25829844/2680216) I posted a year ago in September? – Josh Crozier Jul 08 '15 at 00:47
1

why you double answer? – Adriano Resende Oct 02 '15 at 17:47

Make body have 100% of the browser height

23 Answers23

Linked

Related