Menu
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:
<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> 
899
You can't base a percentage height on a parent that has no height set otherwise the height should default to auto (content doesn't count as height either). Also you can't base a child's percentage height on a parent that has min or max height set either as it must be a real height.
height:100vh The . box class has only 100vh which is 100% of the viewport height. When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto .
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
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/
154
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
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
