Utilizing a simple three row structure:
<div class="EditorHeaderWrapper">
<h1>Title</h1>
</div>
<div class="EditorMainRowWrapper">
// Content of the main row goes here
</div>
<div class="EditorFooterWrapper">
</div>
Is there a way to ensure that when the browser height is reduced, the middle row collapses completely before affecting the footer or header?
.EditorHeaderWrapper{
position:absolute;
top:0;
left:0;
right:0;
height:49px;
background-image:url('blah');
border-bottom:1px solid black;
}
.EditorMainRowWrapper{
position:absolute;
top:49px;
left:0;
right:0;
bottom:30px;
background:#f9f9f4;
overflow:hidden;
}
.EditorFooterWrapper{
position:absolute;
bottom:0;
left:0;
right:0;
height:30px!important;
background:#3c3b37;
border-bottom:1px solid black;
}
You can view a functional demonstration in this fiddle: http://jsfiddle.net/ZaFp8/3/
The issue arises when implementing the code in a real browser (FF26) within the body element without any additional styles present. In this scenario, the footer becomes cutoff prematurely. Jsfiddle introduces some modifications to rectify this problem.
To address this, you may need to include certain definitions for the body, html, or possibly a wrapper div with specific formatting. But what exactly should be added, and why?