StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>As said, using jQuery you can use:</p> <pre><code>$(document).ready(function(){ $("#container").height(); }); </code></pre> <p>Please be aware though of the way <code>height</code> is calculated by jQuery. To quote from the <a href="http://api.jquery.com/height/" rel="nofollow"><strong>documentation</strong></a>: </p> <blockquote> <p>Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property.</p> </blockquote> <p>What this means is, that it will ignore any margin, padding and borders you may have applied.</p> <p>The alternatives nobody mentioned you can avail of to get the exact height you are interested in are as follows:</p> <p><strong>innerHeight()</strong></p> <pre><code>$(document).ready(function(){ $("#container").innerHeight(); }); </code></pre> <p>Use this if you want not only the element height but also include any padding.</p> <p><strong>outerHeight()</strong></p> <pre><code>$(document).ready(function(){ $("#container").outerHeight(); //Include padding and borders $("#container").outerHeight(true); //Include padding, borders and margins }); </code></pre> <p>Use this if you want not only the element height but also include any padding, borders and margins (if true is passed as parameter).</p> <p>See <a href="http://jsfiddle.net/yAJsq/1/" rel="nofollow"><strong>DEMO</strong></a></p> <p>The demo shows how a height of 300px is applied to a div. In addition the css applies margin-top of 20px, padding-top of 50px as well as borders of 5px which all effect the total height.</p> <p><em>Demo output for height()</em></p> <blockquote> <p>Notice though how jQuery <code>height()</code> still only returns 300 pixels, ignoring the additional height added to the element through css.</p> </blockquote> <p><em>Demo output for innerHeight()</em></p> <blockquote> <p>Notice how jQuery <code>innerHeight()</code> return 350 pixels, which is the 300 from the div + the 50 for the padding.</p> </blockquote> <p><em>Demo output for outerHeight()</em></p> <blockquote> <p>Notice how jQuery <code>outerHeight()</code> return 360 pixels, which is the 300 from the div + the 50 for the padding + 10 for the border (5 bottom and 5 top).</p> </blockquote> <p><em>Demo output for outerHeight(true)</em></p> <blockquote> <p>Notice how jQuery <code>outerHeight(true)</code> return 380 pixels, which is the 300 from the div + the 50 for the padding + 10 for the border (5 bottom and 5 top) + 20 from the margin.</p> </blockquote>

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