I cant figure out what is wrong with my styles.
Hope someone could help me with this.
Code example:
<style type="text/css"> .maindiv { overflow:hidden; border:#000 1px solid; width:450px; min-height:250px; } .left_inner { float:left; width:200px; min-height:100%; background:#00CC33; } .right_inner { float:left; width:150px; background:#C93; } </style> <div class="maindiv"> <div class="left_inner">Left Block content</div> <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> </div>
The way it should be is like in Opera Browser (see image):
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
Adding min-height:100% gives you the default height you want body to have and then allows the page dimensions to fill the viewport without content breaking out of the body. This works only because html has derived its 100% height based on the viewport.
container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
Min height always overwrites height and max-height, so you can't just use both. You can use both, but the min-height will take precedence if it ever conflicts with max-height or height.
The How
http://jsfiddle.net/L9GEa/
The Why
html
element already has a determined height, but it does not (at least in this context). Luckily (or by design) this one element has the unique property of it's height being determinable when it is assigned a percentage height. That is the essential concept because in order to calculate (determine) the height of any other element which is assigned a percentage height you must also be able to determine the height of it's parent.display:inline-block;vertical-align:top;
with the one caveat that you will then have to add html comments around any white space between those elements.The CSS
.maindiv { overflow:hidden; border:#000 1px solid; width:450px;min-height:250px; /*changes*/ height:100%; } .left_inner { float:left; width:200px; min-height:100%; background:#00CC33; /*changes*/ float:none; display:inline-block; vertical-align:top; } .right_inner { float:left; width:150px; background:#C93; /*changes*/ float:none; display:inline-block; vertical-align:top; } /*changes*/ html, body{ height:100%; }
The HTML
<div class="maindiv"> <div class="left_inner">Left Block content</div><!-- --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div> </div>
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