这是一小段 HTML。
<html>
<body>
<div id="containerDiv" style="background-color:red; height: 200px">
<div id="topDiv" style="background-color:green">
<input type="button">1</input>
<div>
<div id="textAreaDiv" style="background-color:blue;width:100%; height:100%;">
<textarea style="width:100%; height:100%;">123</textarea>
</div>
<div id="bottomDiv" style="background-color:purple">
<input type="radio" name="Milk" value="Milk">Milk</input>
<input type="radio" name="Butter" value="Butter">Butter</input>
</div>
</div>
</body>
</html>
我正在尝试使 textAreaDiv.height 成为 containerDiv.height - (topDiv.height + bottomDiv.height)。这在 Chrome 中完美运行,但在 IE9 中却不行。在 IE9 中,textarea 的高度大约是两个字符的高度。知道如何让它在 IE9 中像在 Chrome 中一样工作吗?
这是我得到的屏幕截图:http: //postimage.org/image/bfn6bsalv/
更新 这是一个使用 javascript 的解决方案,但我仍然想要一个纯 CSS 解决方案
<html>
<head>
<script type="text/javascript" src="JQuery-1.7.2.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var textHeight = $('#containerDiv').height() - ($('#topDiv').height() + $('#bottomDiv').height());
$('#textBox').height(textHeight);
});
</script>
<div id="containerDiv" style="background-color:red; height: 400px">
<div id="topDiv" style="background-color:green;height:25px;">
<input type="button">1</input>
</div>
<div id="textAreaDiv" style="background-color:blue;width:100%;">
<textarea id="textBox" style="width:100%;">123</textarea>
</div>
<div id="bottomDiv" style="background-color:purple;height:25px;">
<input type="radio" name="Milk" value="Milk">Milk</input>
<input type="radio" name="Butter" value="Butter">Butter</input>
</div>
</div>
</body>
</html>