CSS height 100% percent not working
Solution 1
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/
Solution 2
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
Solution 3
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 height100%
Solution 4
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
Pavel Sládek
Updated on July 09, 2022Comments
-
Pavel Sládek almost 2 years
I have a div with
height: 100%;
but it's not working. When I declare a fixed height (for exampleheight: 600px;
) it is working, but I would like a responsive design.html:
<blink><div class="row-fluid split-pane fixed-left" style="position: relative; height: 78%;"> <div class="split-pane-component" style="position: relative; width: 50em;"> <div style=""> <ul class="nav nav-tabs"> <li class="active"><a href="#html" data-toggle="tab">Html</a></li> <li><a href="#helpers" data-toggle="tab">Helpers</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="html" style="height: 100%;"> <textarea id="htmlArea" style="height: 100%;">{{:html}}</textarea> </div> <div class="tab-pane" id="helpers" style="height: 100%;"> <textarea id="helpersArea">{{:helpers}}</textarea> </div> </div> </div> </div> <div class="split-pane-divider" id="my-divider" style="left: 50em; width: 5px;"></div> <div class="split-pane-component" style="left: 50em; margin-left: 5px;"> <div style=""> <ul class="nav nav-tabs"> <li> <a href="#" class="active">Preview <img width="22px" height="16px" class="preview-loader" src="img/spinner-green2.gif" style="display: none" /> </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" style="height: 100%;"> <iframe name="previewFrame" frameborder="0" allowtransparency="true" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe> </div> </div> </div> </div> </div> </blink>
-
Muhammad Umer almost 9 yearsit's not unknown, browser has computed value of each element. It's NOT unknown
-
Stephan Schielke about 8 yearsAnswer is correct. html, body must be height 100%. The div you want has to be 100% + all the parents between body and the div you want to set.
-
Aaron Franke over 5 yearsHow do I assign an element's height relative to the height of the page?
-
Cody MacLeod about 4 yearsThis worked for me.
-
cby016 over 3 yearsPosition fixed works too.