Suitable for the Framework layout that CRM and ERP can use, and the height and width are adaptive. The IFRAME on the right is also highly adaptive. Adjusted the pixel differences between different browsers. multiple browsers have the same performance. Only the standard and simple CSS is used.CodeThe code is simple but meticulous. CSS hack is basically not used. For beginners, you only have to watch it.
I know, average Program Staff, all of them are tired of doing this thing. Use it if you think it is useful. Still a few bricks for me.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> No title page </title> <br/> <style> <br/> body, HTML <br/> {<br/> margin: 0; <br/> Height: 100%; <br/> background-color: Aqua; <br/> overflow: hidden; <br/>}< br/> # top <br/> {<br/> Height: 80px; <br/> width: auto; <br/>}< br/> # Middle <br/> {<br/> border-style: solid; <br/> border-width: 1px 0px; <br/> border-color: #000000; <br/> width: 100%; <br/> Height: auto; <br/> top: 80px; <br/> bottom: 20px; <br/> position: absolute; <br/> background-color: darkgray; <br/>}< br/> # bottom <br/> {<br/> Height: 20px; <br/> width: auto; <br/> bottom: 0; <br/> position: absolute; <br/>}< br/> # Left <br/>{< br/> float: Left; <br/> width: 200px; <br/> border-Right: solid 1px white; <br/> overflow: auto; <br/> Height: 100%;/* compatible Code */<br/> top: 0px; <br/> bottom: 0px; <br/> position: absolute; <br/> left: 0px; /* compatible Code */<br/>}< br/> # Right <br/> {<br/> background-color: # efefef; <br/> overflow: auto; <br/> Height: 100%;/* compatible Code */<br/> left: 201px; <br/> top: 0px; <br/> bottom: 0px; <br/> position: absolute; <br/> right: 0px; /* compatible Code */<br/>}< br/> # Main <br/> {<br/> top: 0px; <br/> bottom: 0px; <br/> position: absolute; <br/> width: 100%; <br/> Height: 100%; <br/>}</P> <p> </style> <br/> </pead> <br/> <body> <br/> <Form ID =" form1 "> <br/> <Div id =" divall "> <br/> <Div id =" TOP "> <br/> <p> logo </p> <br/> </div> <br/> <Div id = "Middle"> <br/> <Div id = "Left"> <br/> left <br/> <br/> left <br/> navigation <br/> left <br/> navigation <br/> br/> left <br/> left <br/> left <br/> <br/> left <br/> </div> <br/> <Div id = "right"> <br /> <IFRAME src = "http://www.cnblogs.com" frameborder = "0" <br/> marginheight = "0" id = "Main" name = "Main"> </iframe> <br /> </div> <br/> <Div id = "bottom"> <br/> copyright information <br/> </div> <br/> </div> <br/> </form> <br/> </body>
Supplement: many of my friends raised questions, saying that they used absolute positioning and used floating. After several calls, it is found that only in this way can the display be normal. If you use the IE 8 browser, the comments and comments can be omitted. I am actually a layman of CSS, and the above Code has been tried. Use is king. Some friends say that IFRAME in IE6 may be faulty. This is really a problem worth trying to modify, because there are not a few enterprises that use IE6. Therefore, understanding the principles and practices are the most feasible.
In practical applications, if you want to be refined, it is difficult to adjust the style without Js. In short, solving the problem is the most important, followed by concise code. And skill, we can only use it as a skill.
Supplement: In another depressing case, the "HTML original program code editor" in the blog garden automatically generates two sets of styles after I paste the code. I do not know why. Corrected.
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
