CSS height 100 percent not working

Question

I have a div with height  100   but it s not working  When I declare a fixed height  for example height  600px   it is working  but I would like a responsive design   html    lt blink gt  lt div class  row-fluid split-pane fixed-left  style  position  relative  height  78    gt       lt div class  split-pane-component  style  position  relative  width  50em   gt           lt div style    gt               lt ul class  nav nav-tabs  gt                   lt li class  active  gt  lt a href   html  data-toggle  tab  gt Html lt  a gt  lt  li gt                   lt li gt  lt a href   helpers  data-toggle  tab  gt Helpers lt  a gt  lt  li gt               lt  ul gt                lt div class  tab-content  gt                   lt div class  tab-pane active  id  html  style  height  100    gt                       lt textarea id  htmlArea  style  height  100    gt    html   lt  textarea gt                   lt  div gt                   lt div class  tab-pane  id  helpers  style  height  100    gt                       lt textarea id  helpersArea  gt    helpers   lt  textarea gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt       lt div class  split-pane-divider  id  my-divider  style  left  50em  width  5px   gt  lt  div gt       lt div class  split-pane-component  style  left  50em  margin-left  5px   gt           lt div style    gt               lt ul class  nav nav-tabs  gt                   lt li gt                       lt a href     class  active  gt Preview                      lt img width  22px  height  16px  class  preview-loader  src  img spinner-green2 gif  style  display  none    gt                       lt  a gt                   lt  li gt               lt  ul gt                lt div class  tab-content  gt                   lt div class  tab-pane active  style  height  100    gt                       lt iframe name  previewFrame  frameborder  0  allowtransparency  true  allowfullscreen  true  style  width  100   height  100    gt  lt  iframe gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt   lt  blink gt

User · Answer

Set the containing element div to a height   Otherwise your asking the browser to set the height to 100  of an unknown value and it can t     More info here   http   webdesign about com od csstutorials f set-css-height-100-percent htm

User · Answer

For code mirror divs refer to the manual  these sections might be useful to you   http   codemirror net demo fullscreen html  var editor   CodeMirror fromTextArea document getElementById  code        lineNumbers  true    theme   night     extraKeys         F11   function cm          cm setOption  fullScreen    cm getOption  fullScreen                 Esc   function cm          if  cm getOption  fullScreen    cm setOption  fullScreen   false                   And also take a look at   http   codemirror net demo resize html  Also a comment   Inline styling is horrible you should avoid this at all costs  not only will it confuse you  it s poor practice

User · Answer

You aren t specifying the  height  of your html  When you re assigning a percentage in an element  i e  divs  the css compiler needs to know the size of the parent element  If you don t assign that  you should see divs without height   The most common solution is to set the following property in css   html      height  100       margin  0      padding  0      You are saying to the html tag  html is the parent of all the html elements   Take all the height in the HTML document   I hope I helped you  Cheers

User · Answer

You probably need to declare the code below for height 100  to work for your divs  html  body  margin 0 padding 0 height 100         fiddle  http   jsfiddle net 5KYC3

User · Answer

Night s answer is correct   html  body  margin 0 padding 0 height 100      Also check that your div or element is NOT inside another one  with height less than 100   Hope this helps someone else

User · Answer

I believe you need to make sure that all the container div tags above the 100  height div also has 100  height set on them including the body tag and html

User · Answer

I would say you have two options    to get all parent divs styled with 100  height  including body and html  to use absolute positioning for one of the parent divs  for example  content  and then all child divs set to height 100

[javascript] CSS height 100% percent not working

Examples related to javascript

Examples related to html

Examples related to css

Examples related to height