ie6中的布局、绝对位置问题答案

【问题标题】：Layout, absolute position issues in ie6ie6中的布局、绝对位置问题
【发布时间】：2013-07-06 20:50:15
【问题描述】：

我正在尝试制作类似于即时消息类型界面的东西。

页面有以下要求：

页面是固定的（它不会滚动）
顶部固定横幅
中心的可滚动面板包含聊天消息
底部的固定 div 包含用于输入的文本区域

这是标记：

<body>
<div id="container">
    <div id="banner"></div>

    <div id="content">
    <div id="messageAndControlContainer">

        <div id="messageContainer">
            <div id="message">
                <p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p>
                <p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p>
                <p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p>
                <p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p>
                <p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p><p>chat message</p>
            </div>

        </div>
        <div id="control">
            <textarea>enter your message</textarea>
        </div>

    </div>
    </div>

</div>

</body>

这是 JSfiddle：http://jsfiddle.net/bzMfe/1/

这在现代浏览器中运行良好（如在 JSFiddle 中），但在 ie6 中完全搞砸了。请问有什么想法吗？

【问题讨论】：

标签： css scroll chat internet-explorer-6

【解决方案1】：

使用中间面板的表达式解决了这个问题。

#message {
  height:expression(document.body.clientHeight-170);
  width:expression(document.body.clientWidth-40);
}

【讨论】：