Databases
StackOverflow2013
Postsdbo
POCannot extend div height when hidden divs within are made visible
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCannot extend div height when hidden divs within are made visible
    text
    copied!<p>I have a <code>&lt;div&gt;</code> that contains another <code>&lt;div&gt;</code>, which in turn contains a series of <code>&lt;div&gt;</code>s, which can be toggled. I have set the first two <code>&lt;div&gt;</code>s to have <code>height: 100%;</code>. So now when I have too many <code>&lt;div&gt;</code>s made visible and it does not fit into the screen, the main <code>&lt;div&gt;</code> does not extend, leaving the bg to be the color of body.</p> <p>Here's how the (simplified) <code>html</code> looks like:</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div class="col" id="col1"&gt;&lt;/div&gt; &lt;div class="col" id="col2"&gt;&lt;/div&gt; &lt;div class="col" id="col3"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the relevant <code>CSS</code>:</p> <pre><code>body, html { background-color: darkgray; margin: 0; height: 100%; width: 100%; } #wrapper { width: 80%; height: 100%; margin: 0 auto; margin-top: 0; margin-bottom: 0; padding: 0; background-color: #666; color: white; min-width: 722px; max-width: 1119px; font-family: 'Roboto Condensed', sans-serif; box-shadow: 0px 0px 25px black; } .col { /*background-color: red;*/ height: 100%; float:left; margin-top: 0; margin-right: 0.6667%; margin-left: 0.6667%; } #col1 { width: 24%; } #col2 { width: 48%; box-shadow: 0px 0px 5px black; } #col3 { width: 24%; } </code></pre> <p>This is how it looks like in <a href="http://jsfiddle.net/sodiumnitrate/HbjtG/1/" rel="nofollow noreferrer">jsfiddle</a>.</p> <p>And here's a screenshot of the problem: <img src="https://i.stack.imgur.com/NSOC5.jpg" alt="screenshot of the problem"> I have tried to add the following code to the <code>jQuery</code> (within the <code>.click</code> function) to solve the problem:</p> <pre><code>var top = $('#col2:last-child').position().top; var bottom = top + $('#col2:last-child').height(); $('#wrapper').css('height', bottom); </code></pre> <p>which, in chrome, gives me the following error in the console:</p> <pre><code>Uncaught TypeError: Cannot read property 'top' of undefined </code></pre> <p>I really would like to solve this within <code>CSS</code> if I can.</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