[問題] DIV與CSS排版問題

看板Web_Design作者時間14年前 (2011/10/26 21:06), 編輯推噓1(107)
留言8則, 5人參與, 最新討論串1/1
小弟想要利用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
background:url(nothing.txt) ? 可以用txt唷? 頭一次看到
10/26 21:15, 1F

10/26 21:23, , 2F
我是參考http://ppt.cc/cPV7
10/26 21:23, 2F

10/26 23:05, , 3F
把fix拿掉
10/26 23:05, 3F

10/26 23:19, , 4F
加個padding如何? ex: padding:120px 0 50px;
10/26 23:19, 4F

10/26 23:19, , 5F
忘了說,是加在 #content 裡
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
請直接看編號12217號文章,非常的明瞭
10/27 02:15, 8F
文章代碼(AID): #1Eg0NXci (Web_Design)