Databases
StackOverflow2013
Postsdbo
POCSS: last child element's height should be based on previos siblings but not overflow parent
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS: last child element's height should be based on previos siblings but not overflow parent
    text
    copied!<p>Relevant JS Fiddle <a href="http://jsfiddle.net/arosen/FMQtR/" rel="nofollow">http://jsfiddle.net/arosen/FMQtR/</a></p> <h1>Problem</h1> <p>My HTML looks something like this:</p> <pre><code>&lt;div id='parent'&gt; &lt;div id='one'&gt; A variable amount of text here. &lt;/div&gt; &lt;div id='two'&gt; A less important variable amount of text here. &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The #parent div is a fixed height and cannot change. Within it, I have at least two child divs. The first one (or many) will have an unknown amount of text in it determining its height. Based on the content of the first one, I want the last one to take up as much height is left in the parent but not overflow.</p> <p>My current example CSS is:</p> <pre><code>#parent { border: 1px solid #000; height: 150px; width: 150px; } #one, #two { border: 1px dashed #333; height: auto; margin: 5px; padding: 5px; overflow: hidden; } </code></pre> <h1>My current JS solution</h1> <pre><code>function() { var $two = $('#two'); var $parent = $('#two').parent() $parent.css('overflow', 'hidden'); var heightDifference = $parent[0].scrollHeight - $parent.height(); $two.css('height', $two.height() - heightDifference); } </code></pre> <p>I'm wondering if there is a CSS layout or HTML solution to this problem or if I must use the JS solution I have in the fiddle that is run on the push of the last button.</p> <p><strong>EDIT</strong> Updated my JS fiddle as the text will <strong>not</strong> change once on the page but depending on information loaded from the server, will not know how much text it will have until the page is rendered.</p> <p><strong>EDIT 2</strong> Only modern (and IE 9) browsers need to be supported.</p> <p><strong>EDIT 3</strong> The final div <strong>must</strong> have a height as it is used by other jQuery plugins.</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