我正在尝试创建一个 html5 聊天客户端，其中我有一个布局 顶部的大聊天窗口和底部的小行编辑器:
+-------------------+
| |
| |
| |
| |
+-------------------+
| |
+-------------------+
如何创建始终适应窗口大小的布局？ 我尝试了很多东西，但要么得到一个 100% 大小的聊天窗口，要么得到两个框但不高 够了。
<html>
<head>
<title>Chat Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" />
<script type="text/javascript" src="client.js"></script>
<style type="text/css">
html {
overflow: hidden;
}
body {
overflow: hidden;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: gray;
}
#tabs{
margin:0;
padding-top:4em;
padding-left:12em;
padding-bottom:3em;
background: red;
}
#container{
margin-left:5px;
margin-right:5px;
margin-bottom:0px;
margin-top:0px;
min-height:10em;
position: relative;
background: green;
}
</style>
</head>
<body>
<div id="tabs">
<p>Bar</p>
</div>
<div id="container" class="ui.widget">
<p>Foo</p>
</div>
</body>
</html>
最佳答案
使用position:absolute; . JSFiddle demo .这在 IE&le6; 中不起作用, 但在 IE≥7 和其他浏览器(FF、Opera、Chrome)中工作正常。
<div id="chatwindow">
<div id="messagewindow">
<!-- messages -->
</div>
<div id="inputcontainer"><p>Your message</p></div>
</div>
#chatwindow{
position:relative;
height:400px; /* if you wish to use all of your space, use
position:absolute; top:0;left:0;right:0;bottom:0;
or drop the chatdwindow div */
}
#messagewindow, #inputcontainer{
position:absolute;
left:0;
right:0;
border:1px solid #000;
}
#messagewindow{
overflow:auto;
top:0;
bottom:3em;
}
#inputcontainer{
display:block;
bottom:0;
height:1em;
padding:.5em;
margin-top:1em;
}
#inputcontainer > p{
margin:0;
}
关于css - html 聊天窗口布局，如何使聊天 View 使用页面的 100% - lineedit 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9379863/