Databases
StackOverflow2013
Postsdbo
POAchieving a simple row layout with CSS using 100% height
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAchieving a simple row layout with CSS using 100% height
    text
    copied!<p>Sorry to have to ask this since there are many CSS 100% height questions here (which I've read).</p> <p>I'm to achieve a simple layout using DIVs instead of a TABLE. The first 3 rows are fixed height, the 4th row should expand and the fifth row should be a fixed size (at the bottom).</p> <p>This is strait forward with a table, how can I do this with DIVs?</p> <p>Here's the TABLE version:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="100%" height="100%" border="1"&gt; &lt;tr height="20px"&gt; &lt;td&gt; fixed height 20 &lt;/td&gt; &lt;/tr&gt; &lt;tr height="50px"&gt; &lt;td&gt; fixed height 50 &lt;/td&gt; &lt;/tr&gt; &lt;tr height="100px"&gt; &lt;td&gt; fixed height 100 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; auto expanding height &lt;/td&gt; &lt;/tr&gt; &lt;tr height="50px"&gt; &lt;td&gt; fixed height 50 &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here's my best attempt so far which doesn't work.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="width: 100%; height: 100%; border-width: 2px; border-style: solid;"&gt; &lt;div style="height: 20px; border-width: 2px; border-style: solid"&gt; fixed height 20 &lt;/div&gt; &lt;div style="height: 50px; border-width: 2px; border-style: solid"&gt; fixed height 50 &lt;/div&gt; &lt;div style="height: 100px; border-width: 2px; border-style: solid"&gt; fixed height 100 &lt;/div&gt; &lt;div style="border-width: 2px; border-style: solid;"&gt; Auto expanding? &lt;/div&gt; &lt;div style="height: 50px; border-width: 2px; border-style: solid"&gt; fixed height 50 &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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