How to make a div 100 height of the browser window

Question

I have a layout with two columns - a left div and a right div   The right div has a grey background-color  and I need it to expand vertically depending on the height of the user s browser window  Right now the background-color ends at the last piece of content in that div    I ve tried height 100   min-height 100    etc

User · Answer

You can use display  flex and height  100vh   x000D   x000D  html  body   x000D    height  100   x000D    margin  0px  x000D    x000D  body   x000D    display  flex  x000D    x000D   x000D   left   right   x000D    flex  1  x000D    x000D   x000D   left   x000D    background  orange  x000D    x000D   x000D   right   x000D    background  cyan  x000D    x000D   lt div class  left  gt left lt  div gt  x000D   lt div class  right  gt right lt  div gt  x000D   x000D   x000D

User · Answer

Simplest way is to do it like this    x000D   x000D  div   x000D  background  red  x000D  height  100vh  x000D    x000D  body   x000D  margin  0px  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

100vw   100  of the width of the viewport  100vh   100  of the height of the viewport  If you want to set the div width or height 100  of browser-window-size you should use  For width  100vw For height  100vh Or if you want to set it smaller size  use the CSS calc function  Example   example       width  calc 100vw - 32px

User · Answer

Here s a fix for the height   In your CSS use    your-object  height  100vh    For browser that don t support vh-units  use modernizr   Add this script  to add detection for vh-units      https   github com Modernizr Modernizr issues 572    Similar to http   jsfiddle net FWeinb etnYC  Modernizr addTest  cssvhunit   function         var bool      Modernizr testStyles   modernizr   height  50vh      function elem  rule               var height   parseInt window innerHeight 2 10               compStyle   parseInt  window getComputedStyle                         getComputedStyle elem  null                          elem currentStyle   height   10            bool     compStyle    height               return bool        Finally use this function to add the height of the viewport to  your-object if the browser doesn t support vh-units     function         if   Modernizr cssvhunit            var windowH     window  height                your-object   css   height     window  height     px

User · Answer

You need to do two things  one is to set the height to 100  which you already did  Second is set the position to absolute  That should do the trick   html  body     height  100     min-height  100     position  absolute      Source

User · Answer

You can use vh in this case which is relative to 1  of the height of the viewport     That means if you want to cover off the height  just simply use 100vh   Look at the image below I draw for you here     Try the snippet I created for you as below    x000D   x000D   left   x000D    height  100vh  x000D    width  50   x000D    background-color  grey  x000D    float  left  x000D    x000D   x000D   right   x000D    height  100vh  x000D    width  50   x000D    background-color  red  x000D    float  right  x000D    x000D   lt div class  left  gt  lt  div gt  x000D   lt div class  right  gt  lt  div gt  x000D   x000D   x000D

User · Answer

This worked for me   html  body       height  100      IMPORTANT    Stretches viewport to 100         wrapper       min-height  100      Minimum height for a modern browser        height auto  important     Important rule for a modern browser        height 100      Minimum height for Internet Explorer        overflow  hidden  important     Firefox scroll-bar        Taken from this page

User · Answer

Try the following CSS   html       min-height  100       margin  0      padding  0     body       height  100       right       min-height  100

User · Answer

Use FlexBox CSS  Flexbox is a perfect fit for this type of problem  While mostly known for laying out content in the horizontal direction  Flexbox actually works just as well for vertical layout problems  All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand  They   ll automatically take up all the available space in their container

User · Answer

Even with all of the answers here  I was surprised to find that none really solved the problem   If I used 100vh height min-height  the layout broke when the content was longer than a page  If I instead used 100  height min-height  the layout broke when the content was less than the page height   The solution I found  which solved both cases  was to combine the top two answers   html  body   mydiv     height  100     min-height  100vh

User · Answer

One of the options is using CSS table  It has great browser support and even works in Internet nbsp Explorer nbsp 8   JSFiddle Example   x000D   x000D  html  body   x000D    height  100   x000D    margin  0  x000D    x000D   container   x000D    display  table  x000D    width  100   x000D    height  100   x000D    x000D   left   right   x000D    display  table-cell  x000D    width  50   x000D    x000D   right   x000D    background  grey  x000D    x000D   lt div class  container  gt  x000D     lt div class  left  gt  lt  div gt  x000D     lt div class  right  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is something that is not exactly like what you had in previous answers  but it could be helpful to some   body     display  flex    flex-direction  column    height  100vh    margin  0px      one     background-color  red      two     margin-top  0px    background-color  black    color  white    overflow-y  scroll      https   jsfiddle net newdark qyxkk558 10

User · Answer

Add min-height  100  and don t specify a height  or put it on auto   It totally did the job for me    container           margin  auto      background-color   909090      width  60       padding  none      min-height  100

User · Answer

Try This Once       x000D   x000D     x000D    padding 0  x000D    margin 0  x000D    x000D   parent div  x000D    overflow hidden  x000D    clear both  x000D    color  fff  x000D    text-align center  x000D    x000D   x000D   left div   x000D    float  left  x000D    height  100vh  x000D    width  50   x000D    background-color  blue  x000D   x000D    x000D   x000D   right div   x000D    float  right  x000D    height  100vh  x000D    width  50   x000D    background-color  green  x000D   x000D    x000D   lt div class   parent div  gt  x000D     lt div class  left div  gt Left lt  div gt  x000D     lt div class  right div  gt Right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Easiest    x000D   x000D  html  x000D  body   x000D    height  100   x000D    min-height  100   x000D    x000D  body   x000D    position  relative  x000D    background  purple  x000D    margin  0  x000D    padding  0  x000D    x000D   fullheight   x000D    display  block  x000D    position  relative  x000D    background  red  x000D    height  100   x000D    width  300px  x000D    x000D   lt html class    gt  x000D   x000D   lt body gt  x000D     lt div class  fullheight  gt  x000D      This is full height  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is what worked for me    x000D   x000D   lt div style  position fixed  top 0px  left 0px  bottom 0px  right 0px  background  red   gt   lt  div gt  x000D   x000D   x000D    Use position fixed instead of position absolute  that way even if you scroll down the division will expand to the end of the screen

User · Answer

You don t mention a few important details like    Is the layout fixed width  Are either or both of the columns fixed width    Here s one possibility    x000D   x000D  body  x000D  div   x000D    margin  0  x000D    border  0 none  x000D    padding  0  x000D    x000D   x000D  html  x000D  body  x000D   wrapper  x000D   left  x000D   right   x000D    height  100   x000D    min-height  100   x000D    x000D   x000D   wrapper   x000D    margin  0 auto  x000D    overflow  hidden  x000D    width  960px     width optional x000D    x000D   x000D   left   x000D    background  yellow  x000D    float  left  x000D    width  360px     width optional but recommended  x000D    x000D   x000D   right   x000D    background  grey  x000D    margin-left  360px     must agree with previous width  x000D    x000D   lt html gt  x000D   lt head gt  x000D     lt title gt Example lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div id  wrapper  gt  x000D       lt div id  left  gt  x000D        Left x000D       lt  div gt  x000D   x000D       lt div id  right  gt  lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    There are many variations on this depending on which columns need to be fixed and which are liquid  You can do this with absolute positioning too but I ve generally found better results  particularly in terms of cross-browser  using floats instead

User · Answer

If you want to set the height of a  lt div gt  or any element  you should set the height of  lt body gt  and  lt html gt  to 100  too  Then you can set the height of element with 100      Here is an example   body  html     height  100       right     height  100

User · Answer

There are several methods available for setting the height of a  lt div gt  to 100    Method  A     x000D   x000D  html  x000D  body   x000D    height  100   x000D    min-height  100   x000D    x000D   div-left   x000D    height  100   x000D    width  50   x000D    background  green  x000D    x000D   div-right   x000D    height  100   x000D    width  50   x000D    background  gray  x000D    x000D   lt div class  div-left  gt  lt  div gt  x000D   lt div class  div-right  gt  lt  div gt  x000D   x000D   x000D    Method  B  using vh    x000D   x000D  html  x000D  body   x000D    height  100   x000D    min-height  100   x000D    x000D   div-left   x000D    height  100vh  x000D    width  50   x000D    background  green  x000D    float  left  x000D    x000D   div-right   x000D    height  100vh  x000D    width  50   x000D    background  gray  x000D    float  right  x000D    x000D   lt div class  div-left  gt  lt  div gt  x000D   lt div class  div-right  gt  lt  div gt  x000D   x000D   x000D    Method  c  using flex box    x000D   x000D  html  x000D  body   x000D    height  100   x000D    min-height  100   x000D    x000D   wrapper   x000D    height  100   x000D    min-height  100   x000D    display  flex  x000D    x000D   div-left   x000D    width  50   x000D    background  green  x000D    x000D   div-right   x000D    width  50   x000D    background  gray  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  div-left  gt  lt  div gt  x000D     lt div class  div-right  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Stupidly easy solution which supports cross-domain and also supports browser re-size    lt div style  height  100vh   gt      lt iframe src       width  100   height  80   gt  lt  iframe gt   lt  div gt    Adjust the iframe height property as required  leave the div height property at 100vh     Why 80   In my real-world scenario I have a header inside the div  before the iframe  which consumes some vertical space - so I set the iframe to use 80  instead of 100   otherwise it would be the height of the containing div  but start after the header  and overflow out the bottom of the div

User · Answer

Just use the  vh  unit instead of  px   which means view-port height    height  100vh

User · Answer

Try to set height 100  in html  amp  body   html   body       height  100       And if you want to 2 div height same use or set the parent element display flex property

User · Answer

Try this - tested   body     min-height  100       right   left     height  100       Edit  2020 update   You can use vh now    right   left     height  100vh

User · Answer

All the other solutions  including the top-voted one with vh are sub-optimal when compared to the flex model solution   With the advent of the CSS flex model  solving the 100  height problem becomes very  very easy  use height  100   display  flex on the parent  and flex  1 on the child elements  They ll automatically take up all the available space in their container   Note how simple the markup and the CSS are  No table hacks or anything   The flex model is supported by all major browsers as well as IE11     x000D   x000D  html  body   x000D    height  100   x000D    x000D  body   x000D    display  flex  x000D    x000D   x000D   left   right   x000D    flex  1  x000D    x000D   x000D   left   x000D    background  orange  x000D    x000D   x000D   right   x000D    background  cyan  x000D    x000D   lt div class  left  gt left lt  div gt  x000D   lt div class  right  gt right lt  div gt  x000D   x000D   x000D    Learn more about the flex model here

User · Answer

Even though this solution is done with jQuery I though it may be useful for anyone doing columns to fit the screen size   For columns starting at the top of the page  this solution is the simplest   body html    height 100      div right    height 100      For columns that are not starting at the top of the page  for example  if they are starting below the header     lt script gt         document  ready function              var column height      body   height            column height   column height - 100     100 is the header height         column height   column height    px               column   css  height  column height            lt  script gt    First method applies the body height to it and the columns as well  which means that is starting pixels   height100    The second method gets the height of page shown to the user by getting the height of the body and then subtracts the header size to know how much height is left to display the column

User · Answer

Actually what worked for me best was using the vh property   In my React application I wanted the div to match the page high even when resized  I tried height  100    overflow-y  auto   but none of them worked when setting height  your percent vh  it worked as intended   Note  if you are using padding  round corners  etc   make sure to subtract those values from your vh property percent or it adds extra height and make scroll bars appear  Here s my sample    frame     background-color  rgb 33  2  211     height  96vh    padding  1  3  2  3     border  1px solid rgb 212  248  203     border-radius  10px    display  grid    grid-gap  5px    grid-template-columns  repeat 6  1fr     grid-template-rows  50px 100px minmax 50px  1fr  minmax 50px  1fr  minmax 50px  1fr

User · Answer

If you   re able to absolutely position your elements   position  absolute  top  0  bottom  0    would do it

User · Answer

x000D   x000D   wrapper     display  -webkit-box    display  -ms-flexbox    display  flex    -ms-flex-wrap  wrap    flex-wrap  wrap    height  100vh     Height window  vh     wrapper  left    width  80      Width optional  but recommended    wrapper  right    width  20      Width optional  but recommended   background-color   dd1f26    x000D   lt  --  vw  hundredths of the viewport width  vh  hundredths of the viewport height  vmin  hundredths of whichever is smaller  the viewport width or height  vmax  hundredths of whichever is larger  the viewport width or height  -- gt   lt div class  wrapper  gt     lt div class  left  gt      Left    lt  div gt     lt div class  right  gt      Right    lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

If you use position  absolute  and jQuery  you could use      mydiv   css  height     document  height      px

User · Answer

You can use the view-port unit in CSS   HTML    lt div id  my-div  gt Hello World  lt  div gt    CSS    my-div       height  100vh     vh stands for view-port height  1vh is 1  of screen height

User · Answer

Block elements consume the full width of their parent  by default   This is how they meet their design requirement  which is to stack vertically      9 4 1 Block formatting   contexts      In a block formatting context  boxes are laid out one after the other    vertically  beginning at the top of a containing block    This behavior  however  does not extend to height   By default  most elements are the height of their content  height  auto    Unlike with width  you need to specify a height if you want extra space   Therefore  keep these two things in mind    unless you want full width  you need to define the width of a block element unless you want content height  you need to define the height of an element    x000D   x000D   Contact   x000D    display  flex         full width by default    x000D    min-height  100vh     use full height of viewport  at a minimum    x000D    x000D   x000D   left   x000D    flex  0 0 60   x000D    background-color  tomato  x000D    x000D   x000D   right   x000D    flex  1  x000D    background-color  pink  x000D    x000D   x000D  body   margin  0       remove default margins    x000D   lt div class  Contact  gt  x000D     lt section class  left  gt  x000D       lt div class    gt  x000D         lt h1 gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  h1 gt  x000D       lt  div gt  x000D     lt  section gt  x000D     lt section class  right  gt  x000D       lt img   gt  x000D     lt  section gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

100  works differently for width and height   When you specify width  100   it means  take up 100  of the available width from the parent element or width of the window    When you specify height  100   it only means  take up 100  of available height from the parent element   This means if you don t specify a height at a top level element  the height of all the children will be either 0 or height of the parent  and that is why you need to set the topmost element to have a min-height of window height   I always specify the body to have a min-height of 100vh and it makes positioning and calculations easy   body     min-height  100vh

User · Answer

There are a couple of CSS 3 measurement units called   Viewport-Percentage  or Viewport-Relative  Lengths  What are Viewport-Percentage Lengths   From the linked W3 Candidate Recommendation above      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    These units are vh  viewport height   vw  viewport width   vmin  viewport minimum length  and vmax  viewport maximum length    How can this be used to make a divider fill the height of the browser   For this question  we can make use of vh  1vh is equal to 1  of the viewport s height  That is to say  100vh is equal to the height of the browser window  regardless of where the element is situated in the DOM tree   HTML   lt div gt  lt  div gt    CSS  div       height  100vh      This is literally all that s needed  Here is a JSFiddle example of this in use   What browsers support these new units   This is currently supported on all up-to-date major browsers apart from Opera Mini  Check out Can I use    for further support   How can this be used with multiple columns   In the case of the question at hand  featuring a left and a right divider  here is a JSFiddle example showing a two-column layout involving both vh and vw   How is 100vh different to 100    Take this layout for example    lt body style  height 100   gt       lt div style  height 200px  gt           lt p style  height 100   display block   gt Hello  world  lt  p gt       lt  div gt   lt  body gt    The p tag here is set to 100  height  but because its containing div has 200 pixels height  100  of 200 pixels becomes 200 pixels  not 100  of the body height  Using 100vh instead means that the p tag will be 100  height of the body regardless of the div height  Take a look at this accompanying JSFiddle to easily see the difference

User · Answer

You can use the following CSS to make a div 100  of the height of the browser window   display  block  position  relative  bottom  0  height  100

User · Answer

This stuff will resize height of content automatically according to   your browser  I hope this will work for you  Just try this example   given below    You have to set up only height 100     x000D   x000D  html body   x000D    height  100   x000D    margin  0  x000D    x000D   content   x000D    height  100   x000D    min-height  100   x000D    position  relative  x000D    x000D   content-left   x000D    height  auto  x000D    min-height  100   x000D    float  left  x000D    background   ddd  x000D    width  50   x000D    position  relative  x000D    x000D   x000D   one   x000D    background  url http   cloud niklausgerber com 1a2n2I3J1h0M red png  center center no-repeat scroll   aaa  x000D    width  50   x000D    position  relative  x000D    float  left  x000D    x000D   x000D   two   x000D   background  url http   cloud niklausgerber com 1b0r2D2Z1y0J dark-red png  center center no-repeat scroll  520E24  x000D    width  50   x000D    float  left  x000D    position  relative  x000D    overflow-y  scroll  x000D    x000D   lt div class  content  id  one  gt  lt  div gt  x000D   lt div class  content-left  id  two  gt  lt  div gt  x000D   x000D   x000D

[html] How to make a div 100% height of the browser window

Examples related to html

Examples related to css

Examples related to height