请参阅JSfiddle

Question

您好我正在尝试制作在线聊天应用程序。

我有html：

<body>
    <table align="center" width="80%">
        <tbody class="scroll">
            <!--All of the chat-->
        </tbody>

        <tbody class="formheight" style="width:100%">
            <tr>
                <td>
                    <form style="width:100%" action="Write-to.php" method="post">
                        <input autocomplete="off" name="txt" type="text" id="usermsg" style="font-size:2.4vw;" value="" />
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</body>

和css：

html, body
{
  height: 100%;
  max-height:100%;
  overflow: hidden;
}
table
{
  height: 100%;
}
tbody {
    overflow: auto;
    width:100%;
}
thead > tr, tbody{
    display:block;
    }

我希望第二个tbody（包含form的那个）位于页面底部，第一个用于向上填充页面的其余部分。

目前我不得不使用jquery来实现我想要的。 目前表单已隐藏一半。我宁愿用CSS做这一切，以便它更适合移动设备。我怎么能这样做？

Jquery的：

var heighty = $(window).height();
var height = $('.formheight').height();
$(".scroll").css("height", heighty - height + "px");

我也不能为我的生活让form text input宽100％？

请参阅JSfiddle

我也非常愿意将这个聊天应用程序放在一起的另一种方式！

Answer 1

这在CSS中是可行的，但是很难在所有浏览器中工作。相反，这是我的建议：

创建一个填充100％高度的元素，底部填充设置为X px。
创建一个position:fixed且高度为X px的元素。
~~给后一个元素z-index:2而前者为z-index:1。~~ z-index不需要手动分配，源代码中的元素自动具有优先级更高，并显示在以前的元素上（如果它们在视觉上叠加）。

如果需要，可以使用其他单位。百分之百是非常容易的，因为你可以将它们加起来达到100％，所以不需要保证金。当然每个都有各自的缺点，但根据我的经验，我所描述的通常具有良好的兼容性并在所有设备上进行比较。您甚至可以使用CSS @media查询来更改不同设备的高度 X 。

Answer 2

你需要使用我们称之为“粘性页脚”的东西，在你的情况下，你的第二个身体进入粘性页脚。对于粘性页脚css+html，请查看此http://ryanfait.com/sticky-footer/或此http://www.cssstickyfooter.com/

CSS聊天布局无法正常工作

请参阅JSfiddle

我也非常愿意将这个聊天应用程序放在一起的另一种方式！

2 个答案: