我正在尝试制作类似于即时消息类型界面的东西。
页面有以下要求:
- 页面固定(不滚动)
- 在顶部固定横幅
- 中间有一个包含聊天消息的可滚动面板
- 底部的固定 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 中它完全搞砸了。有什么想法吗？
最佳答案
解决了使用中间面板的表达式来保存消息。
#message {
height:expression(document.body.clientHeight-170);
width:expression(document.body.clientWidth-40);
}
关于css - ie6 中的布局、绝对位置问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17476807/