This example is to use the JS script to control the height of the parallel div, usually in the div layout, adaptive height has always been a headache problem, mostly using background, jacket Div, right column overlay left column ... To solve. Now add the script, more simple, if there are three horizontal parallel div,fbox, mbox, Sbox, as long as theTags written: onload= "P7_equalcols (' Fbox ', ' mbox ', ' Sbox ')", test conditions: ie5.x, ie6.0, FF1.03, NS7.2, opera8.01. The final effect.
JS code: Copyright belongs to the original author, for study only.
Copy CodeThe code is as follows:
/*
------------------------------------------------
PVII Equal CSS Columns Scripts
Copyright (c) 2005 Project Seven Development
Www.projectseven.com
version:1.5.0
------------------------------------------------
*/
function P7_colh () {//v1.5 by pvii-www.projectseven.com
var i,oh,hh,h=0,da=document.p7eqc,an=document.p7eqa;if (da&&da.length) {
for (i=0;i Oh=da[i].offsetheight;h= (oh>h)? Oh:h;} for (i=0;i da[i].style.height=h+ ' px ';} Else{p7_eqa (DA[I].ID,DA[I].OFFSETHEIGHT,H);}} if (AN) {
for (i=0;i h) {
Da[i].style.height= (H (hh-h)) + ' px ';}}} Else{document.p7eqa=1;}
Document.p7eqth=document.body.offsetheight;
Document.p7eqtw=document.body.offsetwidth;}
}
function p7_eqt () {//v1.5 by pvii-www.projectseven.com
if (document.p7eqth!=document.body.offsetheight| | document.p7eqtw! =document.body.offsetwidth) {
P7_colh ();}
}
function P7_equalcols () {//v1.5 by pvii-www.projectseven.com
if (document.getElementById) {document.p7eqc=new array;for (I=0;idocument.p7eqc[i]=document.getelementbyid ( Arguments[i]);} SetInterval ("P7_EQT ()", 10);}
}
function P7_eqa (el,h,ht) {//v1.5 by pvii-www.projectseven.com
var Sp=10,inc=10,nh=h,g=document.getelementbyid (EL), Oh=g.offsetheight,ch=parseint (g.style.height);
Ch= (CH)? Ch:h;var ad=oh-ch,adt=ht-ad;nh+=inc;nh= (Nh>adt)? adt:nh;g.style.height=nh+ ' px ';
Oh=g.offsetheight;if (OH>HT) {nh= (ht-(OH-HT)); g.style.height=nh+ ' px ';}
if (NH}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "xml:lang=" en "lang=" en "> <pead> <title> Script control three lines three Column Adaptive height div layout </title> <style type= "Text/css" > <!--body{font-size:75%; Font-family:verdana, Geneva, Arial, Helvetica, Sans-serif; line-height:100%; margin:5px; padding:0px; } #header, #mid, #footer {width:760px; margin:0px Auto; padding:0px; } #header {background: #F4F4F4; height:60px; margin-bottom:5px; } h3,h5{padding-top:25px; Color: #708090; Text-align:center; margin:0; } #fbox {background: #F1F1F1; width:195px; Float:left; } #mbox {background: #DFF7FF; margin:0px 5px0px; padding:0px; Float:left; width:360px; } #sbox {background: #FFEBCC; width:195px; Float:right; } p{margin:0px; padding:10px; Text-indent:2em; line-height:130%; } #footer {background: #CDDBED; Border-top:solid 5px #FFFFFF; Text-align:center; height:60px; Clear:both; }-</style> </pead> <body onload= "p7_equalcols (' Fbox ', ' mbox ', ' Sbox ')" > <p> script control Three rows three columns from Adapting to height div layout </p> <p> affinity refers to not just about the blind and screen readers. There are many people who are not blind, but have visual impairments--you and I will become one of them when I get older. One of the simplest ways to make a site more approachable is to allow users to change the size of the text, and denying the user the right to take the lead is likely to make the user unable to read comfortably. </p><p> affinity refers not just to blind people and screen readers. There are many people who are not blind, but have visual impairments--you and I will become one of them when I get older. One of the simplest ways to make a site more approachable is to allow users to change the size of the text, and denying the user the right to take the lead is likely to make the user unable to read comfortably. </p> <p> affinity refers not just to blind people and screen readers. There are many people who are not blind, but have visual impairments--you and I will become one of them when I get older. One of the simplest ways to make a Web site more approachable is to allow users to change the size of the text; Refusing to provide such a choice deprives the user of a dominantLikely to make it impossible for users to read comfortably. </p> <p> If the designer uses pixels to specify the text size, most users will not be able to scale the text because Internet Explorer changes the text size differently than other browsers. Mozilla and Opera can scale text that has been set to a pixel size, while IE in Windows does not. </p> <p> affinity refers not just to blind people and screen readers. There are many people who are not blind, but have visual impairments--you and I will become one of them when I get older. One of the simplest ways to make a site more approachable is to allow users to change the size of the text, and denying the user the right to take the lead is likely to make the user unable to read comfortably. </p> <p> If the designer uses pixels to specify the text size, most users will not be able to scale the text because Internet Explorer changes the text size differently than other browsers. Mozilla and Opera can scale text that has been set to a pixel size, while IE in Windows does not. </p> <p> affinity refers not just to blind people and screen readers. There are many people who are not blind, but have visual impairments--you and I will become one of them when I get older. One of the simplest ways to make a site more approachable is to allow users to change the size of the text, and denying the user the right to take the lead is likely to make the user unable to read comfortably. </p> <p> demo back</p> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
