html聊天窗口的佈局，我如何使聊天視圖使用100％的頁面 - lineedit的大小

我試圖創建一個html5聊天客戶端，在那裏我有一個佈局與大chatwindow頂部和底部的小線條：html聊天窗口的佈局，我如何使聊天視圖使用100％的頁面 - lineedit的大小

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

我該如何創建總是採用窗口大小的佈局？我嘗試了很多東西，但我或者得到一個100％大小的chatwindow，或者兩個盒子，但不夠高的。

<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>

來源

2012-02-21 zbenjamin

使用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; 
}

來源

2012-02-22 10:00:56 Zeta

Yay thx這正是我想要的;） – zbenjamin 2012-02-22 13:41:29

HTML：

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

CSS：

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; 
}

http://jsfiddle.net/29hA9/2/

來源

2012-02-21 15:15:49 MatthewK

嘿回答THX，這幾乎表明我我需要什麼，但我必須向下滾動才能看到底部。至少在Chrome和Firefox中，我沒有嘗試其他瀏覽器。 – zbenjamin 2012-02-21 16:54:24

是的，你是對的，現在應該工作，我加了邊緣底部。 – MatthewK 2012-02-21 18:34:32

通常不推薦使用負邊距。看看會發生什麼，如果你有太多的文字：http://jsfiddle.net/29hA9/3/ – Zeta 2012-02-21 20:39:14

html聊天窗口的佈局，我如何使聊天視圖使用100％的頁面 - lineedit的大小

回答

相關問題