Databases
StackOverflow2013
Postsdbo
POHTML DIV height in IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML DIV height in IE
    text
    copied!<p>Here is a small piece of HTML.</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div id="containerDiv" style="background-color:red; height: 200px"&gt; &lt;div id="topDiv" style="background-color:green"&gt; &lt;input type="button"&gt;1&lt;/input&gt; &lt;div&gt; &lt;div id="textAreaDiv" style="background-color:blue;width:100%; height:100%;"&gt; &lt;textarea style="width:100%; height:100%;"&gt;123&lt;/textarea&gt; &lt;/div&gt; &lt;div id="bottomDiv" style="background-color:purple"&gt; &lt;input type="radio" name="Milk" value="Milk"&gt;Milk&lt;/input&gt; &lt;input type="radio" name="Butter" value="Butter"&gt;Butter&lt;/input&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>What I am trying to do it to make textAreaDiv.height be containerDiv.height - (topDiv.height + bottomDiv.height). This works perfectly in Chrome, but not in IE9. In IE9 the textarea's height is about two character's height. Any idea how to get this to work in IE9 the same as in Chrome?</p> <p>Here is a screen cap of what I am getting: <a href="http://postimage.org/image/bfn6bsalv/" rel="nofollow">http://postimage.org/image/bfn6bsalv/</a></p> <p><strong>UPDATE</strong> Here is a solution with javascript, but I would still like a purely CSS solution</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="JQuery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; $(document).ready(function() { var textHeight = $('#containerDiv').height() - ($('#topDiv').height() + $('#bottomDiv').height()); $('#textBox').height(textHeight); }); &lt;/script&gt; &lt;div id="containerDiv" style="background-color:red; height: 400px"&gt; &lt;div id="topDiv" style="background-color:green;height:25px;"&gt; &lt;input type="button"&gt;1&lt;/input&gt; &lt;/div&gt; &lt;div id="textAreaDiv" style="background-color:blue;width:100%;"&gt; &lt;textarea id="textBox" style="width:100%;"&gt;123&lt;/textarea&gt; &lt;/div&gt; &lt;div id="bottomDiv" style="background-color:purple;height:25px;"&gt; &lt;input type="radio" name="Milk" value="Milk"&gt;Milk&lt;/input&gt; &lt;input type="radio" name="Butter" value="Butter"&gt;Butter&lt;/input&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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