how do I set height of container DIV to 100 of window height

Question

I have a couple of problems with my container DIV   For one it is not recognising the height of my content correctly  I would have thought it would extend beyond the bottom of the main content and sidebar  but it isn t    You can see what I mean on this page   I would also like the container DIV to always fill the available height of the screen window   I have tried setting it to min-height 100   but this didn t have any effect   Here is the CSS I am using for the container DIV    container     padding  0    margin  0    background-color   292929    width  1200px    margin  0 auto    min-height  100       I would be grateful for any help to get this working   Thanks   Nick

User · Answer

You can net set it to view height  html  body       height  100vh

User · Answer

I ve been thinking over this and experimenting with height of the elements  html  body and div  Finally I came up with the code    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 Height question lt  title gt  x000D   lt style gt  x000D   html  height  50   border  solid red 3px    x000D   body  height  70vh  border  solid green 3px  padding  12pt    x000D   div  height  90vh  border  solid blue 3px  padding  24pt    x000D    x000D   lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D    lt div id  container  gt  x000D     lt p gt  amp lt html amp gt  is red lt  p gt  x000D     lt p gt  amp lt body amp gt  is green lt  p gt  x000D     lt p gt  amp lt div amp gt  is blue lt  p gt  x000D    lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    With my browser  Firefox 65 mint 64   all three elements are of 1  different height  2  every one is longer  than the previous  html is 50   body is 70vh  and div 90vh   I also checked the styles without the height with respect to the html and body tags  Worked fine  too   About CSS units  w3schools  CSS units  A note about the viewport    Viewport   the browser window size  If the viewport is 50cm wide  1vw   0 5cm

User · Answer

html     min-height  100      body     min-height  100vh      The html height     will take care of the height of the documents that s height is more than a 100  of the screen view while the body view height  vh  will take care of the document s height that is less than the height of the screen view

User · Answer

Add this to your css   html  body       height 100       If you say height 100   you mean  100  of the parent element   If the parent element has no specified height  nothing will happen  You only set 100  on body  but you also need to add it to html

User · Answer

Did you set the CSS   html  body       height  100       You need this to be able to make the div take up all the space

[height] how do I set height of container DIV to 100% of window height?

Examples related to height

Examples related to css