Seeking guidance on placing a div with 100% height inside a table-cell
div. Attempted giving
display:inline-block; width:100%;height:100%;
to the div, successful in Chrome but facing issues in Mozilla and IE.
Fiddle link: http://jsfiddle.net/kQM74/2/
HTML code:
<div class="container">
<div class="header width100p">
<h2>Header</h2>
</div>
<div class="content width100p">
<div class="width25p npv">
<div class="width100p inner">
<p>navigation</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</div>
...
Respective styles:
<style>
*,html{
margin: 0;
padding: 0;
}
...
Inquiries about successfully positioning a div (.inner) with 100% height inside a table-cell div (.npv). Works well in Chrome but not in IE and Mozilla. Reasons for failure across browsers are unclear. Is there an alternate CSS method to achieve the same result? If yes, how?