Home > Developer > JavaScript
Function vvheight (){
Var sideleft = document. getElementById ("content-left"). scrollHeight;
Var sideright = document. getElementById ("content-right"). scrollHeight;
LayoutHeight = Math. max (sideleft, sideright );
Document. getElementById ("content-left"). style. height = layoutHeight + "px ";
Document. getElementById ("content-right"). style. height = layoutHeight + "px ";
}
I want to use a script to control the adaptive height. I used the code above to control the adaptive height of the left and right columns.
However, some pages are long because of many content, and some pages have less content, so the code used cannot be shortened!
I just want to reduce the content when there are few accesses. How should I write the code? Thank you!
Copy codeThe Code is as follows:
Function vvheight (){
Var CL = document. getElementById ("content-left ");
Var CR = document. getElementById ("content-right ");
While (parseInt (CL. scrollHeight) = parseInt (CL. style. height) {CL. style. height = parseInt (CL. style. height)-30 + "px "}
Var sideleft = CL. scrollHeight;
While (parseInt (CR. scrollHeight) = parseInt (CR. style. height) {CR. style. height = parseInt (CR. style. height)-30 + "px "}
Var sideright = CR. scrollHeight;
LayoutHeight = Math. max (sideleft, sideright );
CL. style. height = layoutHeight + "px ";
CR. style. height = layoutHeight + "px ";
}
Answer:
In IE and Opera, the default value of style. overflowY of DIV is "auto", and the above Code will not be faulty.
In Firefox and Safari, the default value of style. overflowY of DIV is "" (equivalent to "hidden"). Therefore, if you use the above Code directly, an error will occur. Manually adjust style. overflowY = "auto ".
<! 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"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <meta http-equiv =" Content-Language "content =" zh-CN "/> <meta name =" robots "content =" all "/> <meta name = "author" content = "yuehui | 395959@qq.com | xyuehui888@msn.com"/> <meta name = "copyright" content = "yuehui | 395959@qq.com | xyuehui888@msn.com"/> <meta name = "description" content = "root stone, root carving, wood carving, art, works, root painting and calligraphy, Introduction "/> <meta name =" keywords "content =" root stone family, root carving, wood carving, art, works, root painting and calligraphy, introduction "/> <title> root stone, root carving, wood Carving </title> <style type = "text/css"> </style> </pead> <body> content left content left content left <ul id = "menu"> <li onclick = "setm (1) "> 55 × 65 </li> <li onclick =" setm (2) "> 60 × 80 </li> <li onclick =" setm (3) "> 90 × 90 </li> <li onclick =" setm (4) "> 110 × 73 </li> <li onclick =" setm (5) "> 118x53 </li> <li onclick =" setm (6) "> 146x53 </li> <li onclick =" setm (7) "> 170 × 65 </li> <li onclick =" setm (8) "> others </li> </ul> <ul id =" con1 "> content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 </ul> <ul id = "con2"> content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 </ul> <ul id = "con3"> content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 </ul> <ul id = "con4"> content 4 content 4 content 4 Content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 Content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 Content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 </ul> <ul id = "con5"> content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 </ul> <ul id = "con6"> content 6 content 6 content 6 content 6 </ul> <ul id = "con7"> content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 </ul> <ul id = "con8"> content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The following algorithm is slightly different. Which one do you think is better (the human eyes will feel a little blinking at the moment of change )?
<! 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"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <meta http-equiv =" Content-Language "content =" zh-CN "/> <meta name =" robots "content =" all "/> <meta name = "author" content = "yuehui | 395959@qq.com | xyuehui888@msn.com"/> <meta name = "copyright" content = "yuehui | 395959@qq.com | xyuehui888@msn.com"/> <meta name = "description" content = "root stone, root carving, wood carving, art, works, root painting and calligraphy, Introduction "/> <meta name =" keywords "content =" root stone family, root carving, wood carving, art, works, root painting and calligraphy, introduction "/> <title> root stone, root carving, wood Carving </title> <style type = "text/css"> </style> </pead> <body> content left content left content left <ul id = "menu"> <li onclick = "setm (1) "> 55 × 65 </li> <li onclick =" setm (2) "> 60 × 80 </li> <li onclick =" setm (3) "> 90 × 90 </li> <li onclick =" setm (4) "> 110 × 73 </li> <li onclick =" setm (5) "> 118x53 </li> <li onclick =" setm (6) "> 146x53 </li> <li onclick =" setm (7) "> 170 × 65 </li> <li onclick =" setm (8) "> others </li> </ul> <ul id =" con1 "> content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 </ul> <ul id = "con2"> content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 </ul> <ul id = "con3"> content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 </ul> <ul id = "con4"> content 4 content 4 content 4 Content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 Content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 Content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 content 4 </ul> <ul id = "con5"> content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 content 5 </ul> <ul id = "con6"> content 6 content 6 content 6 content 6 </ul> <ul id = "con7"> content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 content 7 Content 7 content 7 content 7 content 7 content 7 </ul> <ul id = "con8"> content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 content 8 </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
These lines of code:
Copy codeThe Code is as follows:
While (CL. scrollHeight = CL. clientHeight) {CL. style. height = CL. clientHeight-30 + "px "}
Var sideleft = CL. scrollHeight;
While (CR. scrollHeight = CR. clientHeight) {CR. style. height = CR. clientHeight-30 + "px "}
If you don't have much time, let's talk about it first. If you are interested in a large number of people, I can start such topics or write them into books in the future.
The scrollHeight attribute of an element is the DHTML attribute first created by Microsoft in IE. It is not a W3C standard or technical recommendation standard, but now almost all browsers support this attribute (this is because there is no alternative in W3C standards-so I usually do not mention the word "standard, but always "compatible and available "). ScrollHeight is the height that an element occupies when it is displayed on the page without a vertical scroll bar ).
[Attach] 64076 [/attach]
ClientHeight is not a W3C standard (in fact, many useful things are irrelevant to "standards", but they are actually standards ). ClientHeight is the actual height occupied by elements displayed on the page (number of dimensions ).
[Attach] 64077 [/attach]
If you do not have a vertical scroll bar inside the element (to give the element enough space, it can be fully displayed; or disable its vertical scroll bar, that is, the style. overflowY is set to "hidden"), scrollHeight = clientHeight.
When the scroll bar appears, clientHeight <scrollHeight, the element cannot be fully displayed on the page. To make it fully displayed, at least the scrollHeight pixel height space is required.
That is, when a vertical scroll bar appears inside an element, scrollHeight is the minimum height for the element to be completely displayed.
In the first example above, I keep shortening the height of the DIV (each time it is reduced by 30 pixels) until the internal scroll bar of the DIV appears and obtain the scrollHeight value at this time.
In the second example, I set the DIV height to 1 pixel directly, forcing a scroll bar to appear inside it and getting the scrollHeight value.
There is no obvious difference between the two examples on my monitor. You can adjust the refresh frequency of the monitor to the lowest level to see which method will flash less in the moment of change.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
