Css html聊天窗口布局，如何使聊天视图使用100%的页面-行编辑的大小_Css_Html

Css html聊天窗口布局，如何使聊天视图使用100%的页面-行编辑的大小

css html

Css html聊天窗口布局，如何使聊天视图使用100%的页面-行编辑的大小,css,html,Css,Html,我正在尝试创建一个html5聊天客户端，在这里我有一个布局顶部有一个大的聊天窗口，底部有一个小的lineedit： +-------------------+ | | | | | | | | +-------------------+ | | +-------------------+ 如何创建始终与窗口大小相适应

我正在尝试创建一个html5聊天客户端，在这里我有一个布局顶部有一个大的聊天窗口，底部有一个小的lineedit：

+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
+-------------------+

如何创建始终与窗口大小相适应的布局？我尝试了很多东西，但我要么得到一个100%大小的聊天窗口，要么得到两个盒子，但不高够了


聊天示例
html{
溢出：隐藏；
}
身体{
溢出：隐藏；
填充：0；
保证金：0；
宽度：100%；
身高：100%；
背景：灰色；
}
#标签{
保证金：0；
垫顶：4em；
左：12em；
垫底：3em；
背景：红色；
}
#容器{
左边距：5px；
右边距：5px；
边缘底部：0px；
边际上限：0px；
最小高度：10em；
位置：相对位置；
背景：绿色；
}
酒吧
福

HTML：

<html>
    <body>
        <div id="top">
        </div>
        <div id="bottom">
        </div>
    </body>
</html>

使用。这在IE中不起作用，但在IE中效果很好≥7和其他浏览器（FF、Opera、Chrome）

嘿，谢谢回答，这几乎显示了我需要什么，除了我必须向下滚动才能看到底部。至少在chrome和firefox中，我没有尝试其他浏览器。是的，你是对的，现在应该可以工作了，我添加了底部边距。通常不建议使用负数

边距。看看如果你有太多的文字会发生什么：@Zeta你知道如果没有溢出怎么做吗？甚至溢出：auto；无法纠正这种行为
<html>
    <body>
        <div id="top">
        </div>
        <div id="bottom">
        </div>
    </body>
</html>

html {
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
#top {
    height: 100%;
    border:1px solid black;
}
#bottom {
    height: 100px;
    margin-top: -100px;
    border:1px solid black;
}

<div id="chatwindow">
 <div id="messagewindow">
  <!-- messages -->
 </div>
 <div id="inputcontainer"><p>Your message</p></div>
</div>