花了點時間研究,如果用 CSS 取代 Frameset 結構.
終於有一點成果,主要是如何使到 CSS DIV Height 即高度可以自動 100%
另外就是佈局和浮動
注意的地方是
只要外層定義了 height: 100% 後,其內在的 DIV 也可以用上 100%
而不是 DIV 隨著不浮動文字而增加高度.
PS. IE6 沒測試,目前的IE8, Opera 10.50, Chrome 4/5/6, FireFox 3.7 都正常
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Replace Frameset</title>
<style type="text/css">
html, body { height: 100%; max-height: 100%; padding: 0; margin: 0; border: 0; overflow: hidden; font-size: 12px; font-family: Verdana, Arial }
#wrapper { height: 100%; max-height: 100%; background: #000; color: #FFF; }
#content { display: block; position: relative; height: 80%; max-height: 100%; overflow-y: hidden; }
#content #message { float: left; height: 100%; width: 85%; overflow-y: hidden; }
#content #message #public { height: 50%; width: 100%; overflow: auto; }
#content #message #private { height: 50%; width: 100%; border-top: 1px dotted #FFF; overflow: auto; }
#content #online { float: right; height: 100%; width: 15%; }
#footer { display: block; position: fixed; bottom: -1px; height: 20%; width: 100%; }
#footer #typing { float: left; height: 100%; width: 85%; }
#footer #option { float: right; height: 100%; width: 15%; }
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="message">
<div id="public">public</div>
<div id="private">private</div>
</div>
<div id="online">online</div>
</div>
<div id="footer">
<div id="typing">typeing</div>
<div id="option">options</div>
</div>
</div>
</body>
</html>
|
