Databases
StackOverflow2013
Postsdbo
POTricky box layout with sticky footer and flexible heights
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTricky box layout with sticky footer and flexible heights
    text
    copied!<p>I am working on a layout that is placed into a wrapper with a fixed height and contains three inner containers.</p> <p>The first container (<strong>header</strong>) should be placed on top within the wrapper and is flexible in it's height.</p> <p>The second container (<strong>content</strong>) is flexible in it's height as well and need to overflow if the available space is not sufficient (<code>overflow-y: auto</code>).</p> <p>The third container (<strong>footer</strong>) also has an unknown height and needs to be placed at the bottom of the wrapper at any time.</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="header"&gt; &lt;span&gt; some unknown content that is placed at the top of the wrapper &lt;/span&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;span&gt; some more unknown content and within here we want to enable vertical scrolling if necessary &lt;/span&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;span&gt; again unknown content that should be placed at the bottom of the wrapper at any time &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The options I have ruled out so far:</p> <ol> <li><strong>absolute positioning</strong> of the footer within the relative positioned wrapper: doesn't work in this case since we don't know the footer's height</li> <li><strong>flexbox model</strong>: not possible since I need to support IE8+</li> <li><strong>table</strong>: the content row doesn't overflow, the complete table would overflow and the footer would be positioned outside of the wrapper</li> <li>table with the content td element's position set to relative and including a div element with position set to absolute (containing the actual content): seems to fix the overflow issue in most browsers, but e.g. in IE9 the content div (with height set to 100%) results in a height of 0</li> </ol> <p>Is there any other option without using Javascript that might work here?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload