首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS+DIV的滚动条有关问题,困惑…

2012-02-10 
CSS+DIV的滚动条问题,困惑…………我是按照这里做的:http://www.blueidea.com/tech/web/2007/4545.asp可是效果

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没地方放,只能换行了.

热点排行