Css height in percent not working

Question

I have the following simple code    x000D   x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt  x000D   x000D   lt head gt  x000D     lt title gt Live Feed lt  title gt  x000D   x000D     lt meta http-equiv  content-type  content  text html  charset UTF-8    gt  x000D   x000D     lt style gt  x000D      body   x000D        margin  0px  x000D        padding  0px  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div style  background-color   eeaabb  width  250px  height  100   border-right  solid 1px  e1e1e1   gt  x000D      I should be tall x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    But the div doesn t get displayed with height being 100   Why

User · Answer

This is what you need in the CSS   html  body       height  100        width  100        margin  0

User · Answer

height  100  works if you give a fixed size to the parent element

User · Answer

You need to set a 100  height on all your parent elements  in this case your body and html  This fiddle shows it working    x000D   x000D  html  body   height  100   width  100   margin  0    x000D  div   height  100   width  100   background   F52887    x000D   lt html gt  lt body gt  lt div gt  lt  div gt  lt  body gt  lt  html gt  x000D   x000D   x000D

User · Answer

Add height 100  to body   body height 100

User · Answer

Make it 100  of the viewport height   div     height  100vh      Works in all modern browsers and IE  9  see here for more info

User · Answer

You can achieve that by using positioning    Try   position  absolute    to get the 100  height

User · Answer

the root parent have to be in pixels if you want to work freely with percents     lt body style  margin  0px  width  1886px  height  939px   gt   lt div id  containerA  class  containerA  style  height 65  width 100    gt       lt div id  containerAinnerDiv  style  position  relative  background-color  aqua width 70  height  80  left 15  top 10    gt          lt div style  height  100  width  50  float  left   gt  lt  div gt          lt div style  height  100  width  28  float left  gt               lt img src  img justimage png  style  max-width 100  max-height 100    gt          lt  div gt          lt div style  height  100  width  22  float  left   gt  lt  div gt       lt  div gt   lt  div gt   lt  body gt

User · Answer

You need to set 100  height on the parent element

[html] Css height in percent not working

Examples related to html

Examples related to css