Percentage Height HTML 5 CSS

Question

I am trying to set a  lt div gt  to a certain percentage height in CSS  but it just remains the same size as the content inside it  When I remove the HTML 5  lt  DOCTYTPE html gt  however  it works  the  lt div gt  taking up the whole page as desired  I want the page to validate  so what should I do   I have this CSS on the  lt div gt   which has an ID of page    page       padding  10px      background-color  white      height  90   important

User · Answer

bobince s answer will let you know in which cases  height  XX    will or won t work   If you want to create an element with a set ratio  height    of it s own width   the best way to do that is by effectively setting the height using padding-bottom  Example for square    lt div class  square-container  gt     lt div class  square-content  gt       lt  -- put your content in here -- gt     lt  div gt   lt  div gt    square-container       any display  block  element      position  relative    height  0    padding-bottom  100      of parent width       square-content     position  absolute    left  0    top  0    height  100     width  100       The square container will just be made of padding  and the content will expand to fill the container  Long article from 2009 on this subject  http   alistapart com article creating-intrinsic-ratios-for-video

User · Answer

You can use 100vw   100vh    CSS3 gives us viewport-relative units  100vw means 100  of the viewport width  100vh  100  of the height         lt div style  display flex  justify-content  space-between background-color  lightyellow  width 100   height 85vh  gt           lt div style  width 70   height  100   border  2px dashed red  gt  lt  div gt           lt div style  width 30   height  100   border  2px dashed red  gt  lt  div gt       lt  div gt

User · Answer

Hi    In order to use percentage     you must define the   of it parent element  If you use body height  100   it will not work because it parent have no percentage in height  In that case in order to work that body height you must add this in html height 100     In other case to get rid of that defining parent percentage you can use  body height 100vh   vh stands for viewport height  I think it help

User · Answer

You need to set the height on the  lt html gt  and  lt body gt  elements as well  otherwise  they will only be large enough to fit the content  For example    x000D   x000D   lt  DOCTYPE html gt  x000D   lt title gt Example of 100  width and height lt  title gt  x000D   lt style gt  x000D  html  body   height  100   margin  0    x000D  div   height  100   width  100   background  red    x000D   lt  style gt  x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

I am trying to set a div to a certain percentage height in CSS   Percentage of what   To set a percentage height  its parent element    must have an explicit height  This is fairly self-evident  in that if you leave height as auto  the block will take the height of its content    but if the content itself has a height expressed in terms of percentage of the parent you ve made yourself a little Catch 22  The browser gives up and just uses the content height   So the parent of the div must have an explicit height property  Whilst that height can also be a percentage if you want  that just moves the problem up to the next level   If you want to make the div height a percentage of the viewport height  every ancestor of the div  including  lt html gt  and  lt body gt   have to have height  100   so there is a chain of explicit percentage heights down to the div       or  if the div is positioned  the    containing block     which is the nearest ancestor to also be positioned    Alternatively  all modern browsers and IE  9 support new CSS units relative to viewport height  vh  and viewport width  vw    div       height 100vh       See here for more info

User · Answer

Sometimes  you may want to conditionally set the height of a div  such as when the entire content is less than the height of the screen  Setting all parent elements to 100  will cut off content when it is longer than the screen size   So  the way to get around this is to set the min-height   Continue to let the parent elements automatically adjust their height Then in your main div  subtract the pixel sizes of the header and footer div from 100vh  viewport units    In css  something like   min-height  calc 100vh - 246px    100vh is full length of the screen  minus the surrounding divs  By setting min-height and not height  content longer than screen will continue to flow  instead of getting cut off

[html] Percentage Height HTML 5/CSS

Examples related to html

Examples related to css

Examples related to height