Databases
StackOverflow2013
Postsdbo
POCSS Height: Fill available space. No fixed heights
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Height: Fill available space. No fixed heights
    text
    copied!<p>So i have the following structure</p> <pre><code>&lt;div id="container"&gt; &lt;div id="head"&gt;&lt;/div&gt; &lt;div id="body"&gt;&lt;/div&gt; &lt;div id="foot"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I am only using the ids for illustration purposes so this is not even necessarily for a full page.</p> <p>I want my container to specify a fixed size... or a relative size, does not matter. Lets for argument sake say 300px height. Also <code>overflow: hidden</code></p> <p>I want head/foot to expand to fit the content within itself, so <code>height: auto</code> is sufficient.</p> <p>I want the body to expand to fit the remaining space in between head and foot. If the content is too big, then scroll (<code>overflow: auto</code>).</p> <p><code>height: 100%</code> on <code>#body</code> does not work because then it gains the height of 300px like the parent and pushes part of itself and the footer out of the parent.</p> <p>Having head and foot <code>position: absolute</code> does not work because by taking them out of the document flow, some content of <code>#body</code> is hidden. To fix that we can use padding-top/bottom but we can't set a <code>padding-top: xxpx</code>/<code>padding-bottom: xxpx</code> on the <code>#body</code> because we don't know the necessary height of the head/foot hence why they are <code>height: auto</code>.</p> <p>Edit:</p> <p>I tried converting the container/head/body/foot into a table where the <code>#body</code> is <code>height: 100%</code>. This works great except that <code>#body</code> won't scroll if the content gets too big, instead the entire table expands to show all content. This is not the desired behavior as I need <code>#body</code> to scroll, not <code>#content</code> or it's parent.</p> <p>Any suggestions?</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