CSS+DIV的滚动条问题,困惑…………
我是按照这里做的:http://www.blueidea.com/tech/web/2007/4545.asp
可是效果却出现了这样的情况:http://www.poemail.cn/poemail/foto/css_1.jpg
不出现滚动条: http://www.poemail.cn/poemail/foto/css_2.jpg
以下是我的代码:
CSS部分:
/* CSS Document */
*{margin:0px;
padding:0px;
}
/*定义页面元素信息之定义表格、输入框、表单*/
table{font-size:9pt;font-family:Arial;color:#000;border-collapse:collapse;}
INPUT{BORDER-TOP-WIDTH:1px;BORDER-LEFT-WIDTH:1px;FONT-SIZE:12px;BORDER-BOTTOM-WIDTH:1px;BORDER-RIGHT-WIDTH:1px;}
/*页面整体基本信息*/
body {font:12px Arial;margin:0px;text-align:left;background:#FFF;
SCROLLBAR-FACE-COLOR: #21a8c3;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #eeeeee;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #ffffff;
}
/*定义Ul、Li等元素*/
ul{float:left;list-style:none;padding:0px 3px 0px 3px;}
li{float:left;list-style:none;padding:0px 3px 0px 3px;}
/*页面布局CSS信息开始*/
/*整个页面层容器*/
#container {width:100%;}
/*页面头部*/
#header {width:1000px;;height:100px;background:#FFCC99;margin:0 auto;border:0;}
/*整一页面横向banner,占页面容器100%,用于banner或可占一页面整体内容*/
#bannerbar {width:100%;border:0 solid;position:relative;float:left;text-align:left;font:12px Arial;}
/*页面主体*/
#pagebody{width:100%;position:relative;background:#ffffff;border:0;}
/*侧边栏(被页面主体包含)*/
#sidebar {width:200px;position:relative;float:left;border-color: #F0F8FF;border: 1px dotted #000000;margin:5px;}
/*中间第二栏(被页面主体包含)*/
#middlebar {width:400px; background:#ffffff;position:relative;float:left;border-color: #F0F8FF;border: 1px dotted #000000;margin:5px;}
/*第三栏(被页面主体包含) */
#threebar{width:200px;position:relative;float:left;border-color: #F0F8FF;border: 1px dotted #000000;margin:5px;}
/*主要内容区域(被页面主体包含)*/
#mainbody {width:600px;position:relative;float:left;border-color: #F0F8FF;border: 1px dotted #000000;margin:5px;}
/*右边栏(被页面主体包含)*/
#rightbar {width:180px;position:relative;float:left;border-color: #F0F8FF;border: 1px dotted #000000;margin:5px;}
/* 清除float,否则的高度会出错 没有包住它里面的有float的元素。 */
.clear-float{clear:both;}
/*页面底部*/
#footer {width:1000px;height:50px;background:#00FFFF;border:0px;}
/*页面布局CSS信息结束*/
#nav{border:0px;position:relative;float:left;
}
/*开始样式表标记工作*/
/*页内标题,新闻列表标题,文字*/
.title{font: Arial 12px;text-align:center;background-image: url(dot.gif);overflow: hidden;}
.bestfont{filter:glow(color=blue,strength=3); height:10px; color:white; padding:1px;}
.goodfont{filter:glow(color=#339900,strength=2); height:10px; color:white; padding:1px;}
.button{color: #484848;border: 1px solid #43C400;font-size: 9pt;height:20; background-image: url(title.gif); }
HTML程序部份,请高手帮忙…………,谢谢
<%@LANGUAGE= "VBSCRIPT " CODEPAGE= "65001 "%>
<!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>
<link href= "css/page.css " rel= "stylesheet " type= "text/css " />
</head>
<body>
<% '页面大格局以三栏分立效果%>
<div id= "container ">
<!--首先包含页面头部分文件!-->
<% '页面banner一整栏内容%>
<div id= "bannerbar "> 这里是Banner Flash栏 </div>
<div id= "pagebody ">
<% '左边栏%>
<div id= "sidebar ">
这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏,这里是左侧边栏, </div>
<% '中间内容%>
<div id= "mainbody "> 这里是中间内容展示栏目,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,这里是中间内容展示栏目,,, <br />
</div>
<% '右边栏%>
<div id= "rightbar "> 这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,这是右边分类,sssssssssssssssssssssssssssss <br />
<ul>
<li> 欢迎光临我的网站. </li>
<li> 欢迎光临....... </li>
<li> 真的欢迎光临我的网站 </li>
<p align= "center "> <div class= "bestfont "> class bestfont </div> </p>
</ul>
</div>
</div>
</body>
</html>
[解决办法]
你的pagebody 的样式 的宽度是自适应的, 它变窄,里面的div没地方放,只能换行了.