StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>What browser support do you need?</p> <p>If you’re ok with</p> <ul> <li>Safari</li> <li>Chrome</li> <li>Firefox</li> <li>Opera 12.1+</li> <li>IE10+</li> </ul> <p>you can use Flexbox to do this trivially. The only issue is it is a bit verbose as there are three syntax out in the wild.</p> <p>First remove any margin and set <code>html</code> and <code>body</code> to be 100% height and width (Firefox needs the width set to fix a bug where the elements don't expand correctly):</p> <pre><code>html, body { height: 100%; width: 100%; /* needed to fix Firefox bug */ margin: 0; } </code></pre> <p>Next set the body to use flexbox rather than the regular box model. Safari, older Chrome, and Firefox use an old syntax. IE10 uses an in-between syntax, and Opera and modern Chrome use the new syntax (latter with prefix):</p> <pre><code>body { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } </code></pre> <p>Next we need to make the elements to be stacked vertically rather than horizontally. Again, with various syntax. Add these to your <code>body</code> selector:</p> <pre><code> -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; </code></pre> <p>Now everything will be laid out vertically but all the elements will have their default with. We want the header and the footer to not stretch so they can stay as they are. However ,we want the main contents to stretch to fill the available space, so we need to say the element is flexible. In the demo I used an article element, so I did the following:</p> <pre><code>article { background-color: #6EB3D2; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } </code></pre> <p>The value 1 means take up one unit worth of space. As no other item is flexible, this is all of the space. IF all three elements used 1, the available space would be sub-divided equally and added to the default size of the elements.</p> <p>The final result should look something like this: <a href="http://jsfiddle.net/Kf9TL/" rel="nofollow">http://jsfiddle.net/Kf9TL/</a> (or <a href="http://jsfiddle.net/Kf9TL/show" rel="nofollow">http://jsfiddle.net/Kf9TL/show</a> as a full page preview).</p> <p>Is this what you want?</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