html - jquery mobile上的聊天页面

Question

我正在尝试在 jquery mobile 上创建一个非常简单的聊天页面，其页面架构如下：

<div data-role="header" data-position="fixed">
    <h1>Chat with...</h1>
</div><!-- /header -->

<div data-role="content">
    <div id="chatcontents"></div><input type="text" />
</div><!-- /content -->

<div data-role="footer" data-position="fixed">
    Footer
</div><!-- /footer -->

div“chatcontents”包含所有消息，输入文本位于底部。

问题是 jquery mobile 覆盖了我的 css 设置，所以它不能成为底部的文本框（考虑到页脚）和“聊天内容”来占据屏幕的其余部分，文本从底部开始。

有人已经试过了吗？

提前致谢。