About Div highly adaptive

 

Many Web designers have encountered highly adaptive problems when they first came into contact with W3C standards. Because the height of objects such as Div: 100%; does not directly produce actual results, I began to doubt whether the browser supports the compiling method of Height: 100%? Of course not. The most obvious example is that table height = "100" has no problem. This is a very troublesome problem. I have browsed many websites, including www.w3cn.org. Some solutions are to constantly modify the fixed value of height, or use the same page background and Div background to spoof the viewer's vision, but they have not fundamentally solved the problem. Today, we finally found the most perfect solution from the CSS website layout record. Let's take a look at this highly adaptive CSS code: HTML, body { Margin: 0px; Height: 100%; } # Left { Background-color: # CCC; Width: 300px; Height: 100%; Float: left; } The code is no longer simple. The height: 100% is set for the # Left object. However, we can also see that the height of HTML and body is set to 100% ;, this is the key to the highly adaptive problem. Analysis: Whether the height of an object can be displayed as a percentage depends on the parent object of the object. # Left directly rotates in the body on the page, so its parent level is body, by default, the browser does not give the body a height attribute. Therefore, when we directly set # left to height: 100%;, no effect will be produced, when we set 100% for the body, its child object # Height: 100% for left will take effect, which is a highly adaptive problem caused by browser parsing rules. In addition to the body application, the Code also applies the same style design to HTML objects. The advantage of this is that both IE and Firefox can be highly adaptive, but the body is not. In addition, the HTML Tag in Firefox is not 100% in height, so the two tags are defined as height: 100%, to ensure that both browsers can be properly displayed. The following is reproduced from the http://hi.baidu.com/samxx8/blog/item/eeb4c0efc112963facafd55b.html I. highly adaptive (the height of the parent Div changes with the height of the Child Div) 1. If the parent Div does not define height and the Child div is a standard stream, the height of the parent Div varies with the content, the height of the parent Div changes with the height of the Child Div. Code: <Style type = "text/CSS"> # Aa {border: #000000 solid 5px} # BB {border: #00 FFFF solid 5px ;} # Cc {border: # 0033cc solid 5px} </Style> <Div id = "AA"> parent Div <Div id = "BB"> sub-Div </div> <Div id = "cc"> sub-Div </div> </Div> Effect:Consistent in IE and FF 2. If the parent Div defines the height and the Child div is a standard stream, the height of the parent Div changes with the content in IE, And the size in FF is fixed. For example, the parent Div sets the height to 50px. Code: <Style type = "text/CSS"> # Aa {border: #000000 solid 5px; Height: 50px} # BB {border: #00 FFFF solid 5px ;} # Cc {border: # 0033cc solid 5px} </Style> <Div id = "AA"> parent Div <Div id = "BB"> sub-Div </div> <Div id = "cc"> sub-Div </div> </Div> IE effect FF 3. If the sub-Div uses the float attribute, it is out of the standard stream and the parent Div does not change with the height of the content. The solution is below the floating Div, add an empty Div and set the clear attribute both. No empty Div code is added: <Styletype = "text/CSS"> # Aa {border: # 000000solid5px ;} # BB {border: # 00ffffsolid5px; float: Left} # Cc { Border: # 0033ccsolid5px; float: Left} </Style> <Divid = "AA"> parent Div <Divid = "BB"> sub-Div </div> <Divid = "cc"> sub-Div </div> </Div> IE effect: FF effect: Code after modification: <Style type = "text/CSS"> # Aa {border: #000000 solid 5px ;} # BB {border: #00 FFFF solid 5px; float: Left} # Cc {border: # 0033cc solid 5px; float: Left} </Style> <Div id = "AA"> parent Div <Div id = "BB"> sub-Div </div> <Div id = "cc"> sub-Div </div> <Div style = "clear: both"> </div> </Div> Modified results: ie ff is consistent 4. Alternative highly adaptive Principle: Padding-bottom changes the length of the column to the same height, while the negative margin-bottom changes it back to the starting position at the bottom, and the overflow part is hidden. In this method, you must add document information for normal display. Code: <! 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"> <Style type = "text/CSS"> # Aa {border: #000000 solid 5px; overflow: hidden ;} # BB {border: #00 FFFF solid 5px; float: Left; padding-bottom: 100000px; margin-bottom:-100000px ;} # Cc {border: # 0033cc solid 5px; float: Left; padding-bottom: 100000px; margin-bottom:-100000px ;} # Dd {float: Left} </Style> <Div id = "AA"> <Div id = "BB"> sub-Div </div> <Div id = "cc"> sub-Div </div> <Div id = "DD"> sub-Div <br/> </div> </Div> Effect: Ii. highly adaptive (the height of the sub-Div changes with the height of the parent Div) When there is a border, you will find that the height of the same DIV in IE is different from that in ff. For example, if you set a div with a height of 100px, the border is border: 5px; the height of IE is 5 + 5 + blank area = 100px, while the DIV with the height of 100px under FF does not include the height, but only the height of the blank area, for example, the black box section: The upper part of the Black Box is aligned, but the effects are different when the same height is set. The Code is as follows: <Style type = "text/CSS"> # Aa {border: #000000 solid 5px; Height: 100px ;} # BB {border: #00 FFFF solid 5px; float: Left; Height: 100%} # Cc {border: # 0033cc solid 5px; float: Left} </Style> <Div id = "AA"> <Div id = "BB"> sub-Div </div> <Div id = "cc"> sub-Div </div> </Div> If no border is set and there is no height inconsistency at all, it is very easy for the sub-Div to adapt to the parent Div. For example, the code above only adds the height: 100% attribute to the sub-Div. Note that if the parent div is body, that is to say, a body has a DIV, so that the DIV is suitable for the body size, the height of the body must be set to change the sub-Div with the body. Body {Height: 100%} IFRAME adaptive height Search IFRAME adaptive height by Google. More than results are returned. Search IFRAME highly adaptive. More than results are returned. I rummaged through the previous several decades to dig out a large number of reposts. The three or five articles were original. In these original articles, we basically only talk about how to adapt to the static state, that is, how to perform dynamic synchronization without considering how to perform dynamic synchronization after JS operations on Dom. In addition, the compatibility is not thorough. This article is intended to be further explored in these two aspects. Some people may not have come into contact with this problem. First, Let's explain what highly adaptive is. IFRAME highly adaptive means that, based on the appearance and interaction of the interface, the border and scrollbar of IFRAME are hidden, and it cannot be seen as an IFRAME. If IFRAME always calls a page of the same fixed height, we can simply write the height of IFRAME. If you want to switch the IFRAME page or perform Dom dynamic operations on the contained page, you need the program to synchronize the IFRAME height and the actual height of the contained page. By the way, IFRAME can only be used as a last resort, which will cause too much trouble for front-end development. There are roughly two traditional practices: Method 1: After each contained page is loaded, execute js to get the height of the page, and then synchronize the IFRAME height of the parent page. Method 2: Execute Js in the onload event of IFRAME on the home page to get the height of the contained page and synchronize the height. From the perspective of code maintenance, method 2 is better than method 1, because method 1, each page to be included should introduce the same code to do this, creating a lot of copies. Both methods only process static things, that is, they are executed only when the content is loaded. It is not convenient if Javascript is used to operate the height changes caused by Dom. If an interval is made in the main window, it will not stop getting the height of the page to be included, and then synchronize it. Is it convenient? Does it solve the problem of JS Dom operations? The answer is yes. Demo page: iframe_a.html, included page Iframe_ B .htm and Iframe_c.html Sample Code on the home page: <iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">function reinitIframe(){var iframe = document.getElementById("frame_content");try{iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;}catch (ex){}}window.setInterval("reinitIframe()", 200);</script> Keep running, will there be a problem with efficiency? I did a test and opened five windows at the same time (IE6, IE7, FF, opera, and Safari) to execute this code without affecting the CPU or even adjusting it to 2 ms, it does not affect (basically maintained at the 0% usage ). Next we will talk about the compatibility of various browsers. How to get the correct height is mainly to compare the body. scrollheight and documentelement. scrollheight. Note that this doctype is used in this article. Different doctype will not affect the result, but if your page does not declare doctype, add one first. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Append the following test code to the home page to output the two values. Sample Code: <div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">function checkHeight() {var iframe = document.getElementById("frame_content");var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;alert("bHeight:" + bHeight + ", dHeight:" + dHeight);}</script> When a page is loaded, you can switch to an absolutely positioned layer to dynamically change the page height. If the layer is expanded, the page height is increased. Sample Code: <div><button onclick="toggleOverlay()">Toggle Overlay</button></div><div style="height:160px;position:relative"><div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div></div><script type="text/javascript">function toggleOverlay() {var overlay = document.getElementById('overlay');overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';}</script> The test values of the above Code in various browsers are listed below: (Bheight = body. scrollheight, dheight = documentelement. scrollheight, Red = error value, Green = correct value) / Layer hiding Layer Expansion Bheight Dheight Bheight Dheight IE6 184 184 184 303 IE7 184 184 184 303 FF 184 184 184 303 Opera 181 181 300 300 Safari 184 184 303 184 Ignore the problem that opera is 3 pixels less than others... It can be seen that if there is no absolute positioning, the two values are equal and it doesn't matter which one is taken. However, if yes, the performance of each browser is not the same. The value of a single browser is incorrect. However, we can find a rule, that is, taking two values that are worth the maximum value can be compatible with different browsers. Therefore, our homepage code should be transformed into this: function reinitIframe(){var iframe = document.getElementById("frame_content");try{var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;var height = Math.max(bHeight, dHeight);iframe.height = height;}catch (ex){}}window.setInterval("reinitIframe()", 200); In this way, the compatibility problem is basically solved. By the way, not only the absolutely positioned layer will affect the value, but float will also lead to the difference between the two values. If you demonstrate the demo, you will find that, except for IE, in other browsers, the layer is hidden after it is expanded, and the obtained height value remains at 303 of the expanded height, instead of hiding it back, the actual value is 184, that is, it cannot be scaled back after it grows taller. This phenomenon also occurs between different included pages. When switching from a high page to a low page, the height is still the value of that height. It can be concluded that when the height of the IFRAME form is higher than the actual height of the document, the height of the form is taken. When the height of the form is lower than the actual height of the document, the actual height of the document is taken. Therefore, it is necessary to set the height to a value lower than the actual document before synchronizing the height. Therefore, add onload = "This. Height = 100" to the IFRAME so that the page is scaled to a shorter size before being synchronized to the same height. This value is determined in practical applications, but cannot be too short. Otherwise, there will be obvious flashes in browsers such as ff. When Dom operations are performed, the Homepage cannot be monitored, but the height is reduced after Dom operations are completed. In one of my actual projects, I didn't do this because every Dom function needs to insert this code, and the cost is too high, in fact, it is not so fatal to scale back the layer. This was not done in the demo. If you have a better method, please let me know. This is the final homepage code: <iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"> </iframe> <script type="text/javascript"> function reinitIframe(){var iframe = document.getElementById("frame_content");try{var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height;} catch (ex){}}window.setInterval("reinitIframe()", 200); </script>