iframe multi-layer nesting, unlimited nesting, highly adaptive solution
|
There are three pages A, B, and C. Page A contains page B, and page B contains page C. Page A adapts to page B, and page C adapts to page B. A-page Copy code The code is as follows:<body> <iframe id="main" name="main" width="980" scrolling="no" frameborder="0" src="Page B" onload="this.height=main.document.body.scrollHeight;this.width=main.document.body.scrollWidth;if(this.height < 410){this.height=410;}"> </iframe> </body> Page B Copy code The code is as follows:<body> <!--Left--> <div style="flost:left;"> Left menu </div> <!--Right--> <div style="flost:right;"> <iframe id="testIframe" name="testIframe" frameborder=0 style="width: 680px;" scrolling="no" src="C Page"></iframe> </div> </body> Page C writes the following JS function to the bottom-level page (i.e. the page at the bottom) and calls the method in the onload event of body [the following formula is a universal formula] Copy code The code is as follows:<script type="text/javascript"> //Automatically expand the Iframe so that all parent page Iframes automatically adapt to the containing page height function autoHeight(){ var doc = document, p = window; while(p = p.parent){ var frames = p.frames, frame, i = 0; while(frame = frames[i++]){ if (frame.document == doc) { frame.frameElement.style.height = doc.body.scrollHeight + 'px'; // Please note that Firefox must add 'px', otherwise it will be invalid in Firefox doc = p.document; break; } } if(p == top){ break; } } } </script> <body onload="autoHeight();"> <!--After testing, the body of this most sub-page must have a div with height, otherwise the above adaptation will take effect--> <div style="height: 1px;"> </div> <div style="padding-bottom: 10px;"> <!--This sentence is also essential--> You can write the real content here and set a value for the padding-bottom of the div </div> </body> |
<<: Good website copywriting and good user experience
>>: MySQL REVOKE to delete user permissions
Recommend
Detailed explanation of two table copy statements: SELECT INTO and INSERT INTO SELECT (Differences between SQL database and Oracle database)
1. INSERT INTO SELECT statement The statement for...
Solution to MySQL service 1067 error: modify the mysql executable file path
Today I encountered the MySQL service 1067 error ...
WeChat applet implements text scrolling
This article example shares the specific code for...
How to eliminate the extra blank space at the bottom of the created web page when browsing
When using Dreamweaver or FrontPage to create HTM...
Web page creation basic declaration document type description (DTD
Using CSS layout to create web pages that comply w...
How to add conditional expressions to aggregate functions in MySql
MySQL filtering timing of where conditions and ha...
Summary of several key points about mysql init_connect
The role of init_connect init_connect is usually ...
Using JS to implement a rotating Christmas tree in HTML
<!DOCTYPE HEML PUBLIC> <html> <hea...
Differentiate between null value and empty character ('') in MySQL
In daily development, database addition, deletion...
How to install mysql5.7 in windows
First download the compressed version of mysql, t...
Detailed explanation of installing redis in docker and starting it as a configuration file
Update: Recently, it was discovered that the serv...
How to deploy ElasticSearch in Docker
1. What is ElasticSearch? Elasticsearch is also d...
Detailed explanation of replace into example in mysql
Detailed explanation of replace into example in m...
MySQL cursor detailed introduction
Table of contents 1. What is a cursor? 2. How to ...
MySQL 5.7.21 decompression version installation and configuration graphic tutorial
This article records the detailed process of down...