[已解决问题] div滚动条的问题
提问时间: 2008-07-19 12:13
悬赏分：100 浏览:225 次
我有div布了一个页面,想适用不同的分辨率,代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD><link rel="stylesheet" href="mainForm.css"/> <BODY> <form> <div id="divToolBar" class="topBar"> <div id="divBar" class="toolBar"> </div> <div class="moduleName"> 模块管理 </div> </div> <div class="navArea"> </div> <div class="mainArea"> </div> <div class="statusBar"> 状态栏 </div> </form> </BODY></HTML> 1*
2
{
}{
3
font-size:12px;
4 font-family:宋体;
5
}
6body
7{}{
8 margin:0px;
9 overflow:hidden;
10 background-color:#fffff4;
11}
12/**//* 顶栏 */
13div.topBar
14{}{
15 height:21px;
16 padding:3px;
17 background-color:#749BD4;
18 border:#abc0e7 1px solid;
19 border-right:#00377a 1px solid;
20 border-bottom:#00377a 1px solid;
21 text-align:left;
22}
23/**//* 工具栏 */
24div.toolBar
25{}{
26 float:left;
27}
28
29/**//* 模块名称 */
30div.moduleName
31{}{
32 float:right;
33 font-size:14px;
34 font-weight:bold;
35 color:#f4f4f4;
36 text-align:right;
37 vertical-align:text-bottom;
38 padding-right:5px;
39 padding-top:4px;
40}
41/**//* 导航区域 */
42div.navArea
43{}{
44 width:200px;
45 overflow:auto;
46 background-color:#eeeeee;
47 border-right:#555555 1px solid;
48 float:left;
49 height:550px;
50}
51/**//* 右侧主区域 */
52div.mainArea
53{}{
54 overflow:auto;
55 padding:15px;
56 float:right;
57
58}
59/**//* 状态栏 */
60div.statusBar
61{}{
62 height:14px;
63 background-color:#666666;
64 border:#bbbbbb 1px solid;
65 border-right:#000000 1px solid;
66 border-bottom:#000000 1px solid;
67 padding:0px;
68 padding-right:8px;
69 padding-bottom:1px;
70 text-align:right;
71 color:White;
72 font-family:Tahoma;
73 font-size:11px;
74 clear:both;
75}
*2
{}{3
font-size:12px;4
font-family:宋体;5
}6
body7
{}{8
margin:0px;9
overflow:hidden;10
background-color:#fffff4;11
}12
/**//* 顶栏 */13
div.topBar14
{}{15
height:21px;16
padding:3px;17
background-color:#749BD4;18
border:#abc0e7 1px solid;19
border-right:#00377a 1px solid;20
border-bottom:#00377a 1px solid;21
text-align:left;22
}23
/**//* 工具栏 */24
div.toolBar25
{}{26
float:left;27
}28
29
/**//* 模块名称 */30
div.moduleName31
{}{32
float:right;33
font-size:14px;34
font-weight:bold;35
color:#f4f4f4;36
text-align:right;37
vertical-align:text-bottom;38
padding-right:5px;39
padding-top:4px;40
}41
/**//* 导航区域 */42
div.navArea43
{}{44
width:200px;45
overflow:auto;46
background-color:#eeeeee;47
border-right:#555555 1px solid;48
float:left;49
height:550px;50
}51
/**//* 右侧主区域 */52
div.mainArea53
{}{54
overflow:auto;55
padding:15px;56
float:right;57
58
}59
/**//* 状态栏 */60
div.statusBar61
{}{62
height:14px;63
background-color:#666666;64
border:#bbbbbb 1px solid;65
border-right:#000000 1px solid;66
border-bottom:#000000 1px solid;67
padding:0px;68
padding-right:8px;69
padding-bottom:1px;70
text-align:right;71
color:White;72
font-family:Tahoma;73
font-size:11px;74
clear:both;75
}不同的分辨率高和宽都是不一样的，我的宽设为100%，高设为100%没有用。我现在想让顶栏始终在浏览器的顶端，状态栏始终在浏览器的底部，让中间的两个div当高度超过显示区域时自动添加滚动条，不知道怎么解决，请高手帮忙，请大家调试好再给我答案，不盛感激.
所有回答(2)
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body,div{margin:0;}
.top{position: fixed;top:0;left:0;width:100%;height:50px;background-color:blue;}
.left{top:50px;width:180px;float:left;background-color:red;}
.main{margin-left:180px;background:#0f0;margin-bottom:20px;background-color:green;}
.bottom{position:fixed;left:0px;bottom:0px;width:100%;height:20px;background-color:yellow;clear:both;}
</style>
</head>
<body>
<div class="top">这时是头</div>
<div class="left">
左边的导航
<br />1
<br />
<br />
<br />
<br />2
<br />
<br />
<br />
<br />
<br />3
<br />
<br />
<br />
<br />
<br />4
<br />
<br />
<br />
<br />5
<br />
<br />
<br />
<br />
<br />
<br />6
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />7
</div>
<div class="main">
<br />1
<br />
<br />
<br />
<br />2
<br />
<br />
<br />
<br />
<br />3
<br />
<br />
<br />
<br />
<br />4
<br />
<br />
<br />
<br />5
<br />
<br />
<br />
<br />
<br />
<br />6
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />7
</div>
<div class="bottom">
底部
</div>
</body>
</html>
这就是你要的效果吧,不过在IE6下运行不行, 在IE7及firefox下运行正常. /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} #Sidebar{width:200px:margin:0 auto;height:50px;background:#0066ff} 看看这段吧，1024 和800下都是满屏的 |
评论
|
1个月前 鹿亮 : 是这样的 如果能让左边也不动 只动右边的 并且滚动条只在div里面 不要在外面 不知道这样怎么弄的 还有目前大多数用户都是ie6的 这样问题还是没有解决 |
|
|
1个月前 鹿亮 : 不过还是对你很感谢 这种布局我觉的在b/s软件中很实用 左面菜单 右面内容 上面标题 下面写个版权之类的,能解决在ie6中就更好了 |
|
|
1个月前 鹿亮 : 还有就是怎么给分的 好心回有好报的哦 |
|
1个月前 侯垒 : 可以的.加入这个. .left{position: fixed;} 右面的东西.可以加入超出范围的时候自动添加滚动条功能就行了style="overflow:scroll" 不过在IE6下无法解决. |