Question

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

Answer 1

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

IE中的HTML DIV高度

1 个答案: