脚本控制DIV三行三列布局自适应高度

Posted on 2008-06-13 11:06 analyzer 阅读(546) 评论(0) 收藏举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

3

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
4

<head>
5

<title>脚本控制三行三列自适应高度DIV布局</title>
6

/*
9

------------------------------------------------
10

PVII Equal CSS Columns scripts
11

www.projectseven.com
13

Version: 1.5.0
14

------------------------------------------------
15

*/
16

function P7_colH(){ //v1.5 by PVII-www.projectseven.com
17

var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;
18

if(dA&&dA.length){
19

for(i=0;i<dA.length;i++){
20

dA[i].style.height='auto';
21

}
22

for(i=0;i<dA.length;i++){
23

oh=dA[i].offsetHeight;h=(oh>h)?oh:h;
24

}
25

for(i=0;i<dA.length;i++){
26

if(an){
27

dA[i].style.height=h+'px';
28

}else{
29

P7_eqA(dA[i].id,dA[i].offsetHeight,h);
30

}
31

}
32

if(an){
33

for(i=0;i<dA.length;i++){
34

hh=dA[i].offsetHeight;
35

if(hh>h){
36

dA[i].style.height=(h-(hh-h))+'px';
37

}
38

}
39

}else{
40

document.p7eqa=1;
41

}
42

documentdocument.p7eqth=document.body.offsetHeight;
43

documentdocument.p7eqtw=document.body.offsetWidth;
44

}
45

}
46

function P7_eqT(){ //v1.5 by PVII-www.projectseven.com
48

if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
49

P7_colH();
50

}
51

}
52

function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com
54

if(document.getElementById){
55

document.p7eqc=new Array;
56

for(i=0;i<arguments.length;i++){
57

document.p7eqc[i]=document.getElementById(arguments[i]);
58

}
59

setInterval("P7_eqT()",10);
60

}
61

}
62

function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com
64

var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
65

ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
66

oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
67

if(nh<adT){
68

setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);
69

}
70

}
71

</script>
72

body {
74

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 75%; PADDING-BOTTOM: 0px; MARGIN: 5px; LINE-HEIGHT: 100%; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
75

}
76

#header {
77

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
78

}
79

#mid {
80

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
81

}
82

#footer {
83

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
84

}
85

#header {
86

BACKGROUND: #f4f4f4; MARGIN-BOTTOM: 5px; HEIGHT: 60px
87

}
88

h3 {
89

MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
90

}
91

h5 {
92

MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
93

}
94

#fbox {
95

BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px
96

}
97

#mbox {
98

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px; WIDTH: 360px; PADDING-TOP: 0px
99

}
100

#sbox {
101

BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px
102

}
103

p {
104

PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-INDENT: 2em; LINE-HEIGHT: 130%; PADDING-TOP: 10px
105

}
106

#footer {
107

CLEAR: both; BORDER-TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT-ALIGN: center
108

}
109

</style>
110

</head>
112

<body onload="P7_equalCols('fbox','mbox','sbox')">
113

<div id="header">
114

<h3>脚本控制三行三列自适应高度DIV布局</h3>
115

</div>
116

<div id="mid">
117

<div id="fbox">
118

<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
119

你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
120

<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
121

你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
122

</div>
123

<div id="mbox">
124

<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
125

你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
126

<p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
127

改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p>
128

<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
129

你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
130

<p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
131

改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p>
132

</div>
133

<div id="sbox">
134

<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
135

你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
136

</div>
137

</div>
138

<div id="footer">
139

<h5>仅供演示</h5>
140

</div>
141

</body>
142

</html>
143

刷新页面返回顶部

Lee's 程序人生

公告

脚本控制DIV三行三列布局自适应高度