Here is a small code sample that I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
table.Sample { width: 600px; table-layout: fixed; }
table.Sample col { width: 60px; }
table.Sample td { height: 20px; line-height: 20px; padding: 0px; }
table.Sample input { width: 55px; height: 17px; padding: 0px; margin: 0px; border-width: 1px; }
</style>
</head>
<body>
<div id="scrollDiv" style="width: 400px; overflow: auto; background-color: #CCCCCC;">
<table class="Sample">
<colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col /><col /></colgroup>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td><input type="text" /></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
</body>
</HTML>
This code functions properly on IE8, IE10, Chrome, FireFox, Safari, etc., but there is an issue when running it on IE9.
As soon as text is entered into the text box, the div grows in height. The scrollbar does not move, but the extra content appears below the scrollbar.
I am unable to set a fixed height for the div in CSS because the number of lines is variable and I cannot guarantee that the scrollbar will always be present (especially since the number of columns varies in the actual scenario).
I can resolve this problem using the following JavaScript code, but I am unsure if I am causing the error myself.
var div = document.getElementById('scrollDiv');
div.style.height = div.offsetHeight + "px";
Thank you