How to make a div always full screen

Question

No matter how its content is like   Is it possible to do this

User · Answer

The best way to do this with modern browsers would be to make use of Viewport-percentage Lengths, falling back to regular percentage lengths for browsers which do not support those units.

Viewport-percentage lengths are based upon the length of the viewport itself. The two units we will use here are vh (viewport height) and vw (viewport width). 100vh is equal to 100% of the height of the viewport, and 100vw is equal to 100% of the width of the viewport.

Assuming the following HTML:

<body>
    <div></div>
</body>

You can use the following:

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

Here is a JSFiddle demo which shows the div element filling both the height and width of the result frame. If you resize the result frame, the div element resizes accordingly.

User · Answer

Change the body element into a flex container and the div into a flex item    x000D   x000D  body   x000D    display  flex  x000D    height  100vh  x000D    margin  0  x000D    x000D   x000D  div   x000D    flex  1  x000D    background  tan  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

This is my solution to create a fullscreen div  using pure css  It displays a full screen div that is persistent on scrolling  And if the page content fits on the screen  the page won t show a scroll-bar   Tested in IE9   Firefox 13   Chrome 21    x000D   x000D   lt  doctype html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8    gt  x000D     lt title gt  Fullscreen Div  lt  title gt  x000D     lt style gt  x000D     overlay   x000D      position  fixed  x000D      width  100   x000D      height  100   x000D      left  0  x000D      top  0  x000D      background  rgba 51 51 51 0 7   x000D      z-index  10  x000D      x000D     lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt div class  overlay  gt Selectable text lt  div gt  x000D     lt p gt  This paragraph is located below the overlay  and cannot be selected because of that    lt  p gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This always works for me    lt head gt       lt title gt  lt  title gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt       lt style type  text css  gt          html  body               height  100               margin  0                      wrapper               min-height  100                   lt  style gt       lt  -- if lte IE 6  gt       lt style type  text css  gt           container               height  100                  lt  style gt       lt   endif -- gt   lt  head gt    lt body gt       lt div id  wrapper  gt some content lt  div gt   lt  body gt    This is probably the simplest solution to this problem  Only need to set four CSS attributes  although one of them is only to make IE happy

User · Answer

What I found the best elegant way is like the following  the most trick here is make the div s position  fixed    x000D   x000D   mask   x000D      background-color  rgba 0  0  0  0 5   x000D      position  fixed  x000D      top  0  x000D      left  0  x000D      right  0  x000D      bottom  0  x000D      margin  0  x000D      box-sizing  border-box  x000D      width  100   x000D      height  100   x000D      object-fit  contain  x000D    x000D   lt html gt  x000D     lt head gt  x000D     lt title gt Test lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt h1 gt Whatever it takes lt  h1 gt  x000D       lt div class  mask  gt  lt  div gt  x000D       lt  body gt  x000D     lt  html gt  x000D   x000D   x000D

User · Answer

I don t have IE Josh  could you please test this for me  Thanks    lt html gt   lt head gt       lt title gt Hellomoto lt  title gt       lt style text  text javascript  gt           hellomoto                       background-color  ccc              position absolute              top 0px              left 0px              width 100               height 100               overflow auto                    body                       background-color  ff00ff              padding 0px              margin 0px              width 100               height 100               overflow hidden                     text                       background-color  cc00cc              height 800px              width 500px                 lt  style gt   lt  head gt   lt body gt   lt div class  hellomoto  gt       lt div class  text  gt hellomoto lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

This is the most stable  and easy  way to do it  and it works in all modern browsers    x000D   x000D   fullscreen   x000D    position  fixed  x000D    top  0  x000D    left  0  x000D    bottom  0  x000D    right  0  x000D    overflow  auto  x000D    background  lime     Just to visualize the extent    x000D     x000D    x000D   lt div class  fullscreen  gt  x000D    Suspendisse aliquam in ante a ornare  Pellentesque quis sapien sit amet dolor euismod congue  Donec non semper arcu  Sed tortor ante  cursus in dui vitae  interdum vestibulum massa  Suspendisse aliquam in ante a ornare  Pellentesque quis sapien sit amet dolor euismod congue  Donec non semper arcu  Sed tortor ante  cursus in dui vitae  interdum vestibulum massa  Suspendisse aliquam in ante a ornare  Pellentesque quis sapien sit amet dolor euismod congue  Donec non semper arcu  Sed tortor ante  cursus in dui vitae  interdum vestibulum massa  Suspendisse aliquam in ante a ornare  Pellentesque quis sapien sit amet dolor euismod congue  Donec non semper arcu  Sed tortor ante  cursus in dui vitae  interdum vestibulum massa  x000D   lt  div gt  x000D   x000D   x000D    Tested to work in Firefox  Chrome  Opera  Vivaldi  IE7   based on emulation in IE11

User · Answer

Unfortunately  the height property in CSS is not as reliable as it should be   Therefore  Javascript will have to be used to set the height style of the element in question to the height of the users viewport   And yes  this can be done without absolute positioning      lt  DOCTYPE html gt    lt html gt     lt head gt       lt title gt Test by Josh lt  title gt       lt style type  text css  gt            padding 0  margin 0           test   background  aaa  height 100   width 100          lt  style gt       lt script type  text javascript  gt        window onload   function             var height   getViewportHeight             alert  This is what it looks like before the Javascript  Click OK to set the height              if height  gt  0            document getElementById  test   style height   height    px                  function getViewportHeight             var h   0           if self innerHeight            h   window innerHeight          else if document documentElement  amp  amp  document documentElement clientHeight            h   document documentElement clientHeight          else if document body             h   document body clientHeight           return h               lt  script gt     lt  head gt     lt body gt       lt div id  test  gt         lt h1 gt Test lt  h1 gt       lt  div gt     lt  body gt   lt  html gt

User · Answer

This is the trick I use  Good for responsive designs  Works perfectly when user tries to mess with browser resizing    lt head gt       lt title gt  lt  title gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt       lt style type  text css  gt           container               position  absolute              width  100               min-height  100               left  0              top  0                 lt  style gt   lt  head gt    lt body gt       lt div id  container  gt some content lt  div gt   lt  body gt

User · Answer

Here s the shortest solution  based on vh  Please note that vh is not supported in some older browsers   CSS   div       width  100       height  100vh      HTML    lt div gt This div is fullscreen    lt  div gt

[html] How to make a <div> always full screen?

Examples related to html

Examples related to css

Examples related to responsive