Set div height to fit to the browser using CSS

Question

I have two DIVs inside a container div  where I need to set them both to fit to the browser window like below  but it doesn t fit in my code  please suggest me a solution    My Style Sheet code   html  body                   width  100                   height  100                   margin  0                  padding  0                   container       height  auto      width  100      div1       float  left      height  100        width  25      div2       float  left      height  100       width  75       Body   lt body gt   lt div class  container  gt     lt div class  div1  gt  lt  div gt     lt div class  div2  gt  lt  div gt   lt  div gt

User · Answer

I think the fastest way is to use grid system with fractions. So your container have 100vw, which is 100% of the window width and 100vh which is 100% of the window height.

Using fractions or 'fr' you can choose the width you like. the sum of the fractions equals to 100%, in this example 4fr. So the first part will be 1fr (25%) and the seconf is 3fr (75%)

More about fr units here.

_x000D_

.container{
  width: 100vw;
  height:100vh; 
  display: grid;
  grid-template-columns: 1fr 3fr;
}

/*You don't need this*/
.div1{
  background-color: yellow;
}

.div2{
  background-color: red;
}

_x000D_

<div class='container'>
  <div class='div1'>This is div 1</div>
  <div class='div2'>This is div 2</div>
</div>

_x000D_

User · Answer

You could also use viewport percentages if you don t care about old school IE   height  100vh

User · Answer

Setting window full height for empty divs  1st solution with absolute positioning - FIDDLE   div1     position  absolute    top  0    bottom  0    width  25      div2     position  absolute    top  0    left  25     bottom  0    width  75       2nd solution with static  also can be used a relative  positioning  amp  jQuery - FIDDLE   div1     float  left    width  25      div2     float  left    width  75        function          div1   div2   css   height    window  innerHeight           window  resize function            div1   div2   css   height    window  innerHeight

User · Answer

You have to declare height of html to div1 elements together  like   html  body   container   div1   div2       height 100       Demo  http   jsfiddle net Ccham

User · Answer

I do not think you need float    x000D   x000D  html  x000D  body  x000D   container   x000D    width  100   x000D    height  100   x000D    x000D   x000D   div1   div2   x000D    display  inline-block  x000D    margin  0  x000D    min-height  100   x000D    x000D   x000D   div1   x000D    width  25   x000D    background-color  green  x000D    x000D   x000D   div2   x000D    width  75   x000D    background-color  blue  x000D    x000D   lt div class  container  gt  x000D     lt div class  div1  gt  lt  div gt  lt  -- x000D    -- gt  lt div class  div2  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    display  inline-block  is used to display blocks as inline  just like spans but keeping the block effect   Comments in the html is used because you have 75    25    100   The space in-between the divs counts  so you have 75    1     25    101   meaning line break

User · Answer

Man  try the min-height    div1       float  left      height  100       min-height  100       width  25      div2       float  left      height  100       min-height  100       width  75

[html] Set div height to fit to the browser using CSS

Examples related to html

Examples related to css