<p>Let's say I have a parent DIV. Inside, there are three child DIVs: header, content and footer. Header is attached to the top of the parent and fills it horizontally. Footer is attached to the bottom of the parent and fills it horizontally too. Content is supposed to fill all the space between header and footer.</p>

<p>The parent has to have a fixed width and height. The content DIV has to fill all available space between header and footer. When the content size of the content DIV exceeds the space between header and footer, <strong><em>the content DIV should display scrollbars and allow appropriate scrolling</em></strong> so that the footer contents should never be obscured nor the footer obscure content.</p>

<p>Now comes the hard part: <strong><em>you don't know the height of the header nor footer beforehand</em></strong> (eg. header and footer are filled dynamically). How can content be positioned <strong><em>without using JavaScript</em></strong>?</p>

<p>Example:</p>

<pre><code>&lt;div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;"&gt;
    &lt;div style="background-color: #80ff80; position : absolute; left : 0; right : 0; top : 0;"&gt;
    header 
    &lt;/div&gt;
    &lt;div style="background-color: #8080ff; overflow : auto; position : absolute;"&gt;
    content (how to position it?)
    &lt;/div&gt;
    &lt;div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;"&gt;
    footer 
    &lt;/div&gt;    
&lt;/div&gt;
</code></pre>

<hr>

<p><strong>To clarify this event further</strong> - the target layout that I'm trying to achieve will be used in a business web application. <strong><em>The parent DIV will have a fixed, but unknown size</em></strong> (for instance, it will be exactly the size of the browser viewport, sizing itself along with sizing the browser window by the user). Let's call the parent DIV a "screen".</p>

<p>The header will contain a set of filtering controls (like textboxes, drop down lists and a "filter" button) that should wrap to the next line if there is insufficient horizontal space (so its height can change any time to accomodate line breaking). <strong><em>The header should always be visible and attached to the top</em></strong> of the "screen".</p>

<p>The footer will contain a set of buttons, like on a dialog window. These too can wrap to next line if there is not enough space horizontally. <strong><em>The footer must be attached to the bottom</em></strong> of the "screen" to be accessible and visible at all times.</p>

<p>The content will contain "screen" contents, like dialog fields etc. If there are too few fields, the rest of the content will be "blank" (in this case the footer should not begin right after the content, but still be attached to the bottom of the "screen" which is fixed size). If there are too many fields, <strong><em>the content DIV will provide scrollbar(s)</em></strong> to access the hidden controls (in this case the content DIV must not extend itself below the footer, as the scrollbar would be partially hidden). </p>

<p>I hope this clarifies the question a little bit further, as I have too low rep to enter comments to your repsonses.</p>

[{'answer_id': 57119, 'author': 'rpetrich', 'author_id': 4007, 'author_profile': 'https://Stackoverflow.com/users/4007', 'pm_score': 0, 'selected': False, 'text': '<p>Absolute positioning is messing you up. Try something like this:</p>\n\n<p>HTML:</p>\n\n<pre><code>&lt;div id="wrapper"&gt;\n &lt;div id="header"&gt;\n  header\n &lt;/div&gt;\n &lt;div id="content"&gt;\n  content\n &lt;/div&gt;\n &lt;div id="footer"&gt;\n  footer\n &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>CSS:</p>\n\n<pre class="lang-css prettyprint-override"><code>#wrapper {\n  width: 200px;\n  height: 200px;\n  overflow: visible;\n  background: #e0e0ff;\n}\n#header {\n  background: #80ff80;\n}\n#content {\n  background: #8080ff;\n}\n#footer {\n  background: #ff8080;\n}\n</code></pre>\n\n<p>edit: perhaps I misunderstood, do you want everything to fit into the 200x200px box or do you want the box to increase its height to fit the content?</p>\n'}, {'answer_id': 57121, 'author': 'busse', 'author_id': 5702, 'author_profile': 'https://Stackoverflow.com/users/5702', 'pm_score': 0, 'selected': False, 'text': '<p>Does the parent need to stay at a fixed height?</p>\n\n<pre><code>&lt;div style="position : relative; width : 200px; background-color : #e0e0ff; overflow : hidden;"&gt;\n&lt;div style="float: left; clear: left; background-color: #80ff80;"&gt;\nheader \n&lt;/div&gt;\n&lt;div style="float: left; clear: left; background-color: #8080ff; overflow : auto; "&gt;\ncontent (how to position it?)\n&lt;BR /&gt;taller\n&lt;BR /&gt;taller\n&lt;BR /&gt;taller\n&lt;BR /&gt;taller\n&lt;BR /&gt;taller\n&lt;BR /&gt;taller\n&lt;BR /&gt;taller\n&lt;BR /&gt;taller\n&lt;/div&gt;\n&lt;div style="float: left; clear: left; background-color: #ff8080;"&gt;\nfooter \n&lt;BR /&gt;taller\n&lt;/div&gt;    \n</code></pre>\n\n<p></p>\n\n<p>if the height of the parent is fixed, this is the closest I\'d know how to get to it offhand -- still not exactly right if those color blocks (as opposed to just text) are truly important and weren\'t just for illustrating the boundaries of the DIVs:</p>\n\n<pre><code>&lt;div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;"&gt;\n&lt;div style="float: left; clear: left; background-color: #80ff80; "&gt;\nheader &lt;BR .&gt; taller\n&lt;/div&gt;\n&lt;div style="float: left; clear: left; background-color: #8080ff; overflow : auto; "&gt;\ncontent (how to position it?)&lt;BR /&gt; and another line\n&lt;/div&gt;\n&lt;div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;"&gt;\nfooter &lt;BR /&gt; taller\n&lt;/div&gt;    \n</code></pre>\n\n<p></p>\n'}, {'answer_id': 57149, 'author': 'harpo', 'author_id': 4525, 'author_profile': 'https://Stackoverflow.com/users/4525', 'pm_score': 2, 'selected': False, 'text': "<p>I'm going to get downmodded for this, but this sounds like a job for a table.</p>\n\n<p>What you're trying to do is to set the total height of three contiguous divs as a unit, and a 1x3 table with height 100% is actually a cleaner solution.</p>\n"}, {'answer_id': 57635, 'author': 'John Christensen', 'author_id': 1194, 'author_profile': 'https://Stackoverflow.com/users/1194', 'pm_score': 0, 'selected': False, 'text': "<p>Do you need to have the center div change size? If you're just trying to make sure that it appears that its background (#8080ff) appears between the header and the footer, why not just have the containing div's background be #8080ff. The header and footer background would override that, and the rest of the div's background would be correct.</p>\n"}, {'answer_id': 58800, 'author': 'Ian Oxley', 'author_id': 1904, 'author_profile': 'https://Stackoverflow.com/users/1904', 'pm_score': 1, 'selected': False, 'text': '<p>If you can get away with not having the main content scrollable, you might be better using the <a href="http://www.themaninblue.com/writing/perspective/2005/08/29/" rel="nofollow noreferrer">footerStickAlt</a> method to make sure your footer stays at the bottom of the screen or the bottom of the content (if the content extends beyond the bottom of the screen).</p>\n'}, {'answer_id': 21977077, 'author': 'pschueller', 'author_id': 2126792, 'author_profile': 'https://Stackoverflow.com/users/2126792', 'pm_score': 2, 'selected': False, 'text': '<h2>Pure CSS Solution 1 - Flexbox:</h2>\n\n<p>You can create a column of divs that behave in this way by using the CSS3 <code>display: flex;</code> property (<a href="http://www.w3.org/TR/css3-flexbox/" rel="nofollow">see W3 Specs</a>)</p>\n\n<p>Using a wrapper, you can align everything in a column with the <code>flex-direction: column;</code> declaration and then fill the vertical space with <code>justify content: space-between;</code> and <code>height: 100vh;</code>. Then all you need to do is make your content element expand with <code>flex: 1 0 0;</code> and give it a scrollbar with <code>overflow-y: auto;</code>.</p>\n\n<p><strong><em>Note on browser support</em></strong> - While flexbox is supported by most modern browsers, there are still a few limitations (see: <a href="http://caniuse.com/#feat=flexbox" rel="nofollow">http://caniuse.com/#feat=flexbox</a>). I would recommend using the <code>-webkit-</code> and <code>-ms-</code> prefixes.</p>\n\n<hr>\n\n<p><strong>Working example</strong>: See the following snippet and this <a href="http://jsfiddle.net/4LxaP/18/" rel="nofollow">jsfiddle</a>.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="true">\r\n<div class="snippet-code snippet-currently-hidden">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>body {\r\n    display: -webkit-flex; /* Safari 6.1+ */\r\n    display: -ms-flex; /* IE 10 */ \r\n    display: flex;\r\n    -webkit-flex-direction: column; /* Safari 6.1+ */\r\n    -ms-flex-direction: column; /* IE 10 */\r\n    flex-direction: column;\r\n    -webkit-justify-content: space-between; /* Safari 6.1+ */\r\n    -ms-justify-content: space-between; /* IE 10 */\r\n    justify-content: space-between; /* Header top, footer bottom */\r\n    height: 100vh;  /* Fill viewport height */\r\n}\r\nmain {\r\n    -webkit-flex: 1 0 0; /* Safari 6.1+ */\r\n    -ms-flex: 1 0 0; /* IE 10 */\r\n    flex: 1 0 0; /* Grow to fill space */\r\n    overflow-y: auto; /* Add scrollbar */\r\n    height: 100%; /* Needed to fill space in IE */\r\n}\r\nheader, footer {\r\n    -webkit-flex: 0 0 auto; /* Safari 6.1+ */\r\n    -ms-flex: 0 0 auto; /* IE 10 */\r\n    flex: 0 0 auto;\r\n}\r\n\r\n\r\n\r\n/* Make it look a little nicer */\r\nbody {\r\n    margin: 0;\r\n    background-color: #8080ff;\r\n}\r\nheader {\r\n    background-color: #80ff80; \r\n}\r\nfooter {\r\n    background-color: #ff8080;\r\n}\r\np {\r\n    margin: 1.25rem;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;\r\n    &lt;header&gt;\r\n        &lt;p&gt;header&lt;/p&gt; \r\n    &lt;/header&gt;\r\n    &lt;main&gt;\r\n        &lt;article&gt;\r\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque lobortis augue, in porta arcu dapibus dapibus. Suspendisse vulputate tempus venenatis. Pellentesque ac euismod urna. Donec dui odio, ullamcorper in posuere eu, laoreet sed nisl. Sed vitae vestibulum leo. Maecenas mattis lacus eget nisl malesuada, quis semper urna ornare. Praesent id mauris nec neque aliquet dignissim.&lt;/p&gt;\r\n                            &lt;p&gt;Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.&lt;/p&gt;\r\n                            &lt;p&gt;Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.&lt;/p&gt;\r\n        &lt;/article&gt;\r\n    &lt;/main&gt;\r\n    &lt;footer&gt;\r\n        &lt;p&gt;footer&lt;/p&gt; \r\n    &lt;/footer&gt;\r\n&lt;/body&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<p><strong>For more information on how to use flexbox see these guides:</strong></p>\n\n<ul>\n<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes</a></li>\n<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></li>\n</ul>\n\n<hr>\n\n<hr>\n\n<h2>Pure CSS Solution 2 - Display Table [Old solution]:</h2>\n\n<p>This can also be done by using the CSS <code>display: table;</code> property (<a href="http://www.w3schools.com/cssref/pr_class_display.asp" rel="nofollow">see W3 Specs</a>).</p>\n\n<p><strong>The HTML:</strong></p>\n\n<pre><code>&lt;div id="screen"&gt;\n    &lt;div id="header"&gt;&lt;/div&gt;\n    &lt;div id="content"&gt;\n        &lt;div id="content_frame"&gt;\n            &lt;div id="content_wrap"&gt;&lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div id="footer"&gt;&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p><strong>The CSS:</strong></p>\n\n<pre><code>html, body, #screen, #content, #content_frame {\n    height: 100%; /* Make #screen viewport height and #content fill space */\n}\n#screen {\n    display: table;\n}\n#header, #content, #footer {\n    display: table-row;\n}\n#content_frame {\n    overflow-y: auto; /* Add scrollbar */\n    position: relative;\n}\n#content_wrap {\n    position: absolute; /* Fix problem with overflow in FF */\n}\n</code></pre>\n\n<p>The overflow property is unreliable on css table elements and their children, so I had to nest the content. In this case I was forced to nest twice and use <code>position: absolute;</code> in order to make it work in Firefox. Maybe someone else can come up with a more elegant solution to avoid this \'divitis\'.</p>\n\n<p>Here is a functioning <strong><a href="http://jsfiddle.net/4LxaP/3/" rel="nofollow">jsfiddle</a></strong>.</p>\n\n<p><strong><em>Warning:</em></strong> This does not appear to work in Opera 12! The content div takes up 100% of the parent\'s height which causes the rows to overflow the table (as they did in firefox).</p>\n'}, {'answer_id': 63935260, 'author': 'JKD', 'author_id': 14152908, 'author_profile': 'https://Stackoverflow.com/users/14152908', 'pm_score': 0, 'selected': False, 'text': '<p>This can be solved by using different techniques. The first one is using media queries. Using them, you can define what your page should look like for each screen size. Secondly, there are several techniques for positioning your footer correctly (sticky footer). Thirdly, you can use different table styles or the flexbox approach to position your content correctly.</p>\n'}]
['https://Stackoverflow.com/questions/57091', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5348/']