StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The answer has been posted a couple of times under different names.</p> <p><a href="https://stackoverflow.com/questions/291537/how-can-i-get-a-div-to-fill-a-table-cell-vertically">How can I get a div to fill a table cell vertically?</a></p> <p><a href="https://stackoverflow.com/questions/3215553/make-a-div-fill-an-entire-table-cell">Make a DIV fill an entire table cell</a></p> <p><strong>NOTE: These solutions assume the table has an explicit height.</strong></p> <p>In Chrome, <code>position: relative</code> is your friend. It'll force the <code><a></code> to take up the entire table cell's height and width. Sadly this isn't enough to make it work in FF and IE. <a href="http://jsfiddle.net/hDYWM/0/" rel="nofollow noreferrer">Check the demo</a>.</p> <p>To make it work in Chrome + FF, you can use <code>display: table</code> instead of <code>display: block</code>. <a href="http://jsfiddle.net/hDYWM/1/" rel="nofollow noreferrer">Check it out</a>.</p> <p>While IE8 and IE9 both support <code>display: table</code>, they don't like its usage in this solution unless you give <code><td></code> a height of 100%, <a href="http://jsfiddle.net/hDYWM/2/" rel="nofollow noreferrer">as seen in this third demo</a>. If you resize your browser window or the width of the table, you'll notice that the link doesn't reach the full height of the cell. That's because the link is going off 100% (<code><a></code>) of 100% (<code><td></code>) of 300px (<code><table></code>), so the link will be at most 300px tall. It's a compromise, and one I'm not sure you'll be able to work around.</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