A div with auto resize when changing window width height

Question

I ve looked everywhere    and still couldn t come up with sample code of a very  basic  idea   A div that is taking 90  of the screen size and it is adjusting itself whenever the browser size changes  to take 90  of the relative screen   The nested divs inside it should resize themselves as well   Is it even possible   EDIT   Width 90  is not working when I try to re size the screen vertically

User · Answer

lt  DOCTYPE html gt       lt html gt     lt head gt     lt style gt      div       padding  20px       resize  both    overflow  auto           img     height  100       width  100    object-fit  contain       lt  style gt     lt  head gt     lt body gt    lt h1 gt The resize Property lt  h1 gt     lt div gt    lt p gt Let the user resize both the height and the width of this 1234567891011 div     element      lt  p gt    lt p gt To resize  Click and drag the bottom right corner of this div element  lt  p gt     lt img src  images scenery jpg  alt  Italian   gt     lt  div gt       lt p gt  lt b gt Note  lt  b gt  Internet Explorer does not support the resize property  lt  p gt     lt  body gt    lt  html gt

User · Answer

In this scenario  the outer  lt div gt  has a width and height of 90   The inner div gt  has a width of 100  of its parent  Both scale when re-sizing the window   HTML   lt div gt       lt div gt Hello there lt  div gt   lt  div gt    CSS  html  body       width  100       height  100      body  gt  div       width  90       height  100       background  green     body  gt  div  gt  div       width  100       background  red      Demo  Try before buy

User · Answer

Use vh attributes  It means viewport height and is a percentage  So height  90vh would mean 90  of the viewport height  This works in most modern browsers   Eg    div     height  90vh      You can forego the rest of your silly 100  stuff on the body   If you have a header you can also do some fun things like take it into account by using the calc function in CSS   Eg    div     height  calc 100vh - 50px       This will give you 100  of the viewport height  minus 50px for your header

User · Answer

Code Snippet   div height  calc 100vh - 10vmax

[html] A div with auto resize when changing window width\height

Examples related to html

Examples related to autoresize