作者local9433 ()
看板Web_Design
標題[問題] DIV與CSS排版問題
時間Wed Oct 26 21:06:39 2011
小弟想要利用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" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
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)
→ Rplus:background:url(nothing.txt) ? 可以用txt唷? 頭一次看到 10/26 21:15
→ terlin10:把fix拿掉 10/26 23:05
→ blinkstar:加個padding如何？ ex: padding:120px 0 50px; 10/26 23:19
→ blinkstar:忘了說，是加在 #content 裡 10/26 23:19
→ terlin10:其實我個人會建你先去了解各個定位和浮動的差別 10/26 23:20
→ terlin10:哪天有空發個教學文好了… 10/26 23:21
推 nochingyo:請直接看編號12217號文章，非常的明瞭 10/27 02:15