0

这是一小段 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>
4

1 回答 1

0

我很高兴你找到了一些有用的东西。我想让你知道我明白为什么它不起作用。您的代码无效。的结束标记topdiv缺少正斜杠。

于 2013-01-17T16:25:09.033 回答