[問題] DIV與CSS排版問題
小弟想要利用DIV與CSS做一個兩欄式的網頁，Header、Footer和treeContent是固定的，
而mainContent當內容過長時是可以下拉的，我要怎麼做才能將 treeContent 部分
和mainContent中的字顯示在 Header 下方，而不是被Header蓋住，並且 treeContent
是固定的，mainContent內容過長時是可以下拉的
執行結果連結:
http://jsfiddle.net/P9W2m/1/
以下附上我所寫的網頁:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="" rel="nofollow">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
<!--
#header{
background:#66CCCC;
color:#FFFFFF;
border-top:2px solid #336699;
border-bottom:2px solid #336699;
width:100%;
height:20%;
position:fixed;
top:0px;
_position:absolute; /* position fixed for IE6 */
_top:expression(documentElement.scrollTop+"px");
}
#content {
float: left;
width: 100%;
}
#treeContent {
float: left;
width: 30%;
}
#mainContent {
float: right;
width: 70%;
}
#footer{
background:#CC99CC;
color:#333333;
text-align:center;
border:2px solid #999999;
padding:5px;
width:100%;
position:fixed;
bottom:0;
clear: both;
_position: absolute; /* position fixed for IE6 */
_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-4);
}
html,body{
background:url(nothing.txt) white fixed; /* prevent screen flash in IE6 */
margin:0; padding:0;
}
-->
</style>
</head>
<body>
<div id="header">
<div id="mainHeader">Main tab</div>
<div id="subHeader">Sub tab</div>
</div>
<div id="content">
<div id="treeContent">Tree Content</div>
<div id="mainContent">
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
Main page<br />
</div>
</div>
<div id="footer">foot page</div>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.250.239.184
※ 編輯: local9433 來自: 111.250.239.184 (10/26 21:09)
→
10/26 21:15, , 1F
10/26 21:15, 1F
→
10/26 21:23, , 2F
10/26 21:23, 2F
→
10/26 23:05, , 3F
10/26 23:05, 3F
→
10/26 23:19, , 4F
10/26 23:19, 4F
→
10/26 23:19, , 5F
10/26 23:19, 5F
→
10/26 23:20, , 6F
10/26 23:20, 6F
→
10/26 23:21, , 7F
10/26 23:21, 7F
推
10/27 02:15, , 8F
10/27 02:15, 8F