Databases
StackOverflow2013
Postsdbo
POCSS to make two vertically stacked divs fill viewport when one is fixed height
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS to make two vertically stacked divs fill viewport when one is fixed height
    primarykey
    data
    text
    <p>I thought this would be fairly simple but I haven't been able to find a solution. I want a layout with 2 divs which fill the browser window. They would be 100% width and one on top of the other. The bottom div must have a fixed height and the top div would fill the rest of the space. I would like the solution to:</p> <ul> <li>Use CSS only (no Javascript)</li> <li>Be compatible with IE7+ (e.g. no CSS calc)</li> <li>Have no overlap between the divs</li> <li>Vertically scroll the content of the top div if it does not fit within the layout </li> </ul> <p>I have tried the following but the margin-bottom seems to have no effect so the two divs overlap (as illustrated by the semi-transparent backgrounds):</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; * { margin: 0; padding: 0; } body, html { height: 100%; } #content { height: 100%; width: 100%; overflow: auto; background: rgba(255,0,0,0.5); margin-bottom: 40px; } #footer { width: 100%; height: 40px; position:absolute; bottom: 0; background: rgba(255,0,0,0.5); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;content&lt;/p&gt;&lt;p&gt;last line of content&lt;/p&gt; &lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><a href="http://jsfiddle.net/9Zhaa/2/" rel="nofollow">JSFiddle</a></p> <p>I have seen several solutions for sticky footers but they all seem to have the divs overlap. Is this as hard as it seems or am I missing something? Any insight would be greatly appreciated!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USCode Monkey
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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