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.

Bramante

CSS3 Viewport-percentage lengths – Alli

Answer 1

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

Dinnie

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 :| – Bramante

ok I found out! it works if I add html,body{min-height:100%;} :D – Bramante

Make a website with this as the only text on it. This is beyond useful for beginning web designers. – Antimasque

Note: if you use the body {min-height} version then you cannot use .body-child{height: 100%} trick. – Boito

Why appear always the scroll bar? Down in the answare there is solution without this problem. But why min-height have this problem? – Bide

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

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. – Dinnie

best answer is with CSS3, using vh -> body { height: 100vh } - check answer here https://mcmap.net/q/53030/-make-body-have-100-of-the-browser-height – Janel

@bFunc I have this chrome issue to. html{height:100%;} body {height:auto} do the job. – Fib

min-height: 100% is not enough. If the page is embedded in an iframe it fails. jsfiddle.net/greggman/jbmaded2 – Scholasticism

I think that's a very specific scenario, although the iframe really shouldn't make a difference. Maybe you are seeing a browser inconsistency ? – Dinnie

@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. – Flip

This method also disables the ability scroll. Folks use height: 100vh like the answer below. @Bramante please accept the below answer as it is now the better way of achieving this. – Ballyrag

FWIW - This did not work for me when trying to resolve this issue in MS Edge. – Procumbent

html { height: 100%; }. This 100% of what? – Cannibalize

@MohammedNoureldin 100% of the current document height aka the size of the browser. – Dinnie

Suggest using the display: table method lower down. This approach means children of the body cannot use height: 100% to fill the page. – Boykin

This is so outdated and won't fit most viewports and layouts cause it is not dynamic. For example, try to zoom your page using it in Google Chrome and it won't stretch. That answer is a bit better. – Windowshop

@Windowshop I agree, using view port based lengths is superior in most use cases. This answer is very old. – Dinnie

Answer 2

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.

Alli

Besides the fact that this is dead simple, it's also good that we adopt new practices. – Radack

@niaster I definitely agree. Browser support has already improved since I posted this answer as well :) – Alli

@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. – Alli

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. – Hangup

@Dinnie According to this, it works on a majority of mobile devices. I've never had any problems with it. Which devices/versions are your referring to? – Alli

On Apple tablets on Safari, this method is really buggy. – Shirlshirlee

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. – Nelda

@cimmanon, the body height 100% didn't work for me with bootstrap. This solution worked. – Cooking

This didn't work for me in Chrome 56.0.2924.87 (64-bit). – Audette

not working when you have another child which is bigger jsfiddle.net/dkdsfddz/266 – Lamont

This solution results in extra scroll on mobile (Chrome, Android) because it calculates viewport height without taking the toolbar into account. – Tav

Exactly as @Tav is saying, this method will cause your page to gain an unnecessary vertical scrollbar in some browsers. Follow this answer instead https://mcmap.net/q/53030/-make-body-have-100-of-the-browser-height for a cross-browser solution. – Slover

This is the only solution that worked for me. All my other elements are absolutely positioned. – Rachelrachele

Answer 3

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.

Quicklime

Also works when there is a global flexbox right under body (body > #flexbox-wrapper) – Ev

This is the correct answer, as the accepted answer will not grow as content gets longer than a single screen. – Situation

Thank you so much, Angry Dan, that ugly white space at the bottom of my site is gone! – Chlori

Of course, since this question was posed, view port based dimensions became a Thing. So now you can just do body{min-height: 100vh} – Quicklime

You also need body { height: auto; } for scrollbars to not be shown in FireFox. other than that, works perfectly. – Loya

This didn't work for me in Chrome 56.0.2924.87 (64-bit). – Audette

I finally found an answer on this page that actually worked: https://mcmap.net/q/53030/-make-body-have-100-of-the-browser-height – Audette

Answer 4

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 .

Anselmo

Thank you for the only working answer :) I assume 'absolute' made it work – Doud

Works well for me in Firefox without scrollbars, thank you. The accepted answer does not. – Doolittle

@Doolittle 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. – Loya

@Loya I still get scroll bars in FireFox with this too. Adding the auto setting to height didn't seem to work for me :( – Pitiless

This didn't work for me in Chrome 56.0.2924.87 (64-bit). – Audette

I don't think setting the entire body's position as absolute is the right way of doing things. – Geniagenial

@AnshSaini May I ask why? – Friedafriedberg

Answer 5

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.

Serenaserenade

I tried all of the high-voted answers on this page, but none worked. This one did! – Audette

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. – Slover

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. – Relate

After 2 hours, this was the only solution that worked for me. Thank You! – Arrowwood

also working correctly when you have eg. Dev Tools open and 100 vh is not available +1 – Icarian

That's awesome. I aswell tried all of the accepted answers, none of them helped as the content was way to large then the actual size. – Comedo

Setting the height to 100% on the html and body effectively locks the body's height to the height of the window. This behavior is absolutely correct. Why? Read on. Percentage heights are based on the screen pixel height of the parent element. Imagine a scenario where an element with a percentage height is appended to a parent with only a percentage min-height set. If the element causes the parent's screen pixel height to grow, you can see why that could be a problem. An infinite loop. Browser's correctly avoid the infinite loop. Hope this helps :) – Carlinecarling

Answer 6

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

Omaromara

Answer 7

A better solution with modern CSS

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

Allrud

How does this offer anything different over the existing answers? – Hangup

I have tried others also, but did not work for me. This one worked, so it can be a solution to someone needy. @Hangup – Allrud

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. – Bitthia

Only option (I've found) which allows for overflowing content to resize the height. – Chumley

this is perfect answer if you're using float – Jinnah

Answer 8

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.

Aposiopesis

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. – Cubature

Answer 9

CSS Height That Works in Both Modern and Legacy Browsers

Most of the other solutions posted here will not work well in legacy browsers! And some of the code people posted will cause a nasty overflow of text beyond 100% height in modern browsers where text flows past background colors, which is bad design! So please try my code solution instead.

The CSS code below should support flexible web page height settings correctly in all known browsers, past and present:

html {
    height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */
    height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */
}

body {
    height: auto; /* Allows content to grow beyond the page without overflow */
    width: auto; /* Allows content to grow beyond the page without overflow */
    min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */
    min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */
    overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar.  Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/
    margin: 0;
    padding: 0;
    background:yellow;/* FOR TESTING: Next add a large block of text or content to your page and make sure this background color always fills the screen as your content scrolls off the page. If so, this works. You have 100% height with flexible content! */
}

NOTES ON THE CODE ABOVE

In many older, as well as newer browsers, if you do not set 100% height on the <html> selector, body will never achieve 100% height! So that is critical here.

The new viewport units ("vh") are redundant on the body selector and not necessary as long as you have set html selector to a height of either 100% or 100vh. The reason is the body always derives its values from the html parent. The exception is a few very old browsers from the past, so its best to set some height value for the body.

Some modern browsers using the body selector will not know how to inherit the viewport height directly. So again, always set your html selector to 100% height! You can still use "vh" units in body to bypass the parent html value and get its property dimensions directly from the viewport in most modern browsers, however. But again, its optional if the parent or root html selector has 100% height, which body will always inherit correctly.

Notice I've set body to height:auto, not height:100%. This collapses the body element around content initially so it can grow as content grows. You do NOT want to set body height and width to 100%, or specific values as that limits content to the body's current visual dimensions, not its scrollable dimensions. Anytime you assign body height:100%, as soon as content text moves beyond the browser's height, it will overflow the container and thus any backgrounds assigned to the original viewport height, creating an ugly visual! height:auto is your best friend in CSS!

But you still want body to default to 100% height, right? That is where min-height:100% works wonders! It will not only allow your body element to default to 100% height, but this works in even the oldest browsers! But best of all, it allows your background to fill 100% and yet stretch farther down as content with height:auto grows vertically.

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 beyond the viewport's height, if it needs to and content grows longer than the viewport page display. It will not break out of the body dimensions. And it does allow scrolling as needed. overflow-y:scroll allows you to add an empty scrollbar to the right of the page content by default in every web browser. The scrollbar only appear inside the scroll bar area if content extends beyond 100% height of the viewport. This allows your page width, and any margins or paddings to be calculated by the browser beforehand and stop the pages from shifting as users view pages that scroll and those that do not. I use this trick often as it sets the page width perfectly for all scenarios and your web pages will never shift and load lightning fast!

I believe height:auto is the default on body in most UA browser style sheets. So understand most browsers default to that value, anyway.

Adding min-height:100% 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 100% height 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.

STYLING HEIGHT FOR LEGACY BROWSERS

Notice I have added "fallback" properties for height and min-height, as many browsers pre-2010 do not support "vh" viewport units. It's 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 and many still use antiquated browsers that do not understand those new units. 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 as by default they both collapsed height by default. If you did not do that, browser background colors and other weird visuals would flow up under content that did not fill the viewport. The example above should solve all that for you and still work in newer browsers.

Before modern HTML5 browsers (post-2010) we solved that by simply setting height:100% on both the html and body selectors, or just min-height:100% on the body. So either solution allows the code above to work in over 20+ years of legacy web browsers rather than a few created the past couple of years. In old Netscape 4 series or IE 4-5, using min-height:100% instead of height:100% on the body selector could still cause height to collapse in those very old browsers and cause text to overflow background colors. But that would be the one issue I could see with this solution.

Using my CSS solution, you now allow your website to be viewed correctly in 99.99% of browsers, past and present rather than just 60%-80% of browsers built the past few years.

Good Luck!

Gottuard

This is the most perfect solution ever seen! – Bloodred

It is cool, but... issue is complex, and one for all solution does not exist. Just to mention one important consideration, currently we have svh (small viewport height) and lvl (large viewport height) which resolves challenges on mobile with/without tools expanded. You need to control the state, not hope it will be self-resolved. – Degraded

Answer 10

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

Thickwitted

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. – Prunella

@Front-endDeveloper This doesn't require jQuery, and unfortunately as of 2021 none of the CSS solutions handle the issue of browser chrome like bookmarks tabs as well as this simple JavaScript solution does. There's a time and place for scripting, and this is it. – Gudren

Answer 11

Here:

html,body{
    height:100%;
}

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

Mantra

Answer 12

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)

Escorial

Answer 13

Try

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

Italicize

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. – Cubature

Answer 14

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.

Decemvirate

Please include an explanation of your solution so others who find this answer can understand. Thanks! – Elegit

Could you explain please, what is the possible purpose of width: 100% for body and html elements? – Cubature

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

Answer 15

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.

Zizith

Answer 16

For the true purists, this one respects the default margins of the browser, and prevents the undesired scroll generated by the other methods, besides growing if the content grows. Tested in Chrome, Safari and Firefox. The backgrounds are just for show...

html {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: red;
}
body {
  flex:1;
  background: green;
}

Virgule

Answer 17

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.

Dropout

Answer 18

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

body{ height: 100vh; }

Brent

Watch out for this. 100vh is actually not what you expect for iOS Safari. – Estragon

Answer 19

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.

Almemar

Answer 20

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

Fulllength

It's crazy how far down flex box is. This is what I use on my projects and it works well in frameworks like react or vue – Baulk

Answer 21

Over 20 answers later and none seem to have mentioned the factor that I found was the most crucial - the markup.

After trying basically every answer in this question and a few others, I restructured my markup to something like the following:

<body>
  <div class="section1">
    <nav>
    </nav>
    ...
  </div>
  <div class="section2">
  </div>
</body>

Essentially, it requires two different outer containers. The first container is for the purpose of containing the navbar and extending the background colour/image all the way to the height of the browser, and the second one for containing everything "below the fold" - including the second background colour/image.

This solution allows the first container's background to expand all the way to the bottom while keeping the second container free to take up as much space as it needs.

From this point on, the only CSS needed to get the result both I and the original question wanted is the following:

body {
  height: 100%;
}

.section1 {
  height: 100%;
  background: black; /* for demo purposes */
}

.section2 {
  background: white; /* for demo purposes */
}

Gudren

Answer 22

Here Update

html
  {
    height:100%;
  }

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

Madaras

Answer 23

Now there is newer way supported by all modern browsers. Simply use:

.el {
  height: -moz-available;
  height: -webkit-fill-available;
  height: stretch;
}

Mycah

Answer 24

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.

Defection

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

Answer 25

CSS3 has a new method.

 height:100vh

It makes ViewPort 100% equal to the height.

So your Code should be

 body{
 height:100vh; 
 }

Plantation

How is this different than the answer I posted a year ago in September? – Alli

why you double answer? – Janel