DIV height set as percentage of screen

Question

I m looking to set a parent DIV as 70  of the full 100  screen height  I ve set the following CSS but it doesn t seem to do anything   body   font-family   Noto Sans   sans-serif  margin  0 auto  height  100   width  100      header   height  70       For some reason it doesn t seem to be working though and the header isn t 70  of the screen size  Any advice

User · Answer

Try using Viewport Height  div       height 100vh       It is already discussed here in detail

User · Answer

make position absolute for that div   http   jsfiddle net btevfik KkKeZ

User · Answer

By using absolute positioning  you can make  lt body gt  or  lt form gt  or  lt div gt   fit to your browser page  For example    lt body style  position  absolute  bottom  0px  top  0px  left  0px  right  0px   gt    and then simply put a  lt div gt  inside it and use whatever percentage of either height or width you wish   lt div id  divContainer  style  height  100    gt

User · Answer

If you want it based on the screen height  and not the window height   const height   0 7   screen height     jQuery     header   height height      Vanilla JS document querySelector   header   style height   height    px      If you have multiple  lt div class  header  gt  elements document querySelectorAll   header   forEach function node      node style height   height    px

User · Answer

This is the solution    Add the html also to 100   html body       height  100      width  100

[html] DIV height set as percentage of screen?

Examples related to html

Examples related to css