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

User · Answer

A quick update  html  body      min-height 100       overflow auto      A better solution with today s CSS  html  body     min-height  100vh    overflow  auto

User · Answer

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  lt div gt  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

User · Answer

You can also use JS if needed  var winHeight   window innerHeight        document documentElement clientHeight     document body clientHeight   var pageHeight      body   height    if  pageHeight  lt  winHeight            main-content    css  min-height  winHeight

User · Answer

Try   lt html style  width 100   height 100   margin  0  padding  0   gt   lt body style  overflow hidden  width 100   height 100   margin 0  padding 0   gt

User · Answer

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

User · Answer

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

User · Answer

Here Update  html         height 100        body       min-height  100        position absolute       margin 0       padding 0

User · Answer

I would use this    x000D   x000D  html  body  x000D        background   E73  x000D        min-height  100   x000D        min-height  100vh  x000D        overflow  auto      lt - this is needed when you resize the screen x000D        x000D   lt html gt  x000D       lt body gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    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

User · Answer

CSS3 has a new method    height 100vh   It makes ViewPort 100  equal to the height    So your Code should be    body   height 100vh

User · Answer

Only with 1 line of CSS    You can get this done   body  height  100vh

User · Answer

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

User · Answer

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

User · Answer

media all           margin  0      padding  0     html  body       width  100       height  100

User · Answer

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

User · Answer

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  0px      padding  0px      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

User · Answer

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

User · Answer

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    lt style gt   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     lt  style gt    lt div class  img wrap  gt     lt img src  https   i pinimg com originals 71 84 fc 7184fc63db0516a00e7d86900d957925 jpg  alt    gt     lt img src  https   i pinimg com originals 71 84 fc 7184fc63db0516a00e7d86900d957925 jpg  alt    gt   lt  div gt    lt script gt     var windowHeight     window  height       var elementHeight       img wrap   height        if  elementHeight  gt  windowHeight               img wrap   css  height elementHeight        else             img wrap   css  height windowHeight          lt  script gt    here is JSfiddle Demo

User · Answer

Here   html body      height 100      body    margin 0    padding 0   background blue

User · Answer

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   quot vh quot   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  quot vh quot  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  quot fallback quot  properties for min-height  as many browsers post-2010 do not support  quot vh quot  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

User · Answer

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

User · Answer

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

User · Answer

html  body     height  100     margin  0    padding  0

User · Answer

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

[html] Make body have 100% of the browser height

Examples related to html

Examples related to css

Examples related to height