Use box-sizing to implement div imitation frame

Author：Eve Cole Update Time：2009-12-07 16:08:04

[ Browsers participating in the test : IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[ Operating system : Windows]

Let’s look at the code first:

Run code box
<!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 ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Using box-sizing to implement div imitation frame</title>
<style type="text/css">
* { margin:0; padding:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;}
html,body { height:100%;}
.top { position:relative; margin-top:-100px; height:100px; background:#f60;}
.side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto;}
.main { position:relative; overflow:auto; height:100%; background:#f30;}
.bottom { position:relative; height:100px; background:#f60; clear:both;}
</style>
</head>
<body>
<div class="top">
top
</div>
<div class="side">
side
 
 
 
 
 
 
</div>
<div class="main">
main
 
 
 
 
 
 
</div>
<div class="bottom">
bottom
</div>
</body>
</html>

[Ctrl+A Select All Tips: You can modify part of the code first and then press Run]

Key parts :

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;}

The principle is probably this :

A thousand words are not worth a picture. Through the comparison before and after plastic surgery, everyone should be able to see the effect of box-sizing:border-box.

Students who understand box-sizing should know that it comes from the CSS3 world which is far away from Weiguo, so IE6/IE7 is not supported, but I am very responsible and say: this demo is normally compatible with IE6/IE7.

Because...

under IE6/IE7, the default box-sizing value of <html> is border-box (Note: IE7 is a little abnormal, and the consciousness has recovered after overflow:hidden, which will not affect the normal operation of this demo). ,

The question now is whether to use this method. Let’s compare the advantages and disadvantages, and you can decide for yourself:

It is better to use the absolute positioning method. This method currently has two main advantages:

basically for each browser. Using the same method, the css code is simple, easy to modify, and easy to understand.
compatible. The absolute positioning method exists under OP10. There is currently no way to fix the bug, so I have to take a detour.

Its biggest disadvantage is that it is inflexible. If there was no IE6, I think I would definitely choose the absolute positioning method.

The following is an application example demo.

Run code box
<!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 ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Using box-sizing to implement div imitation frame</title>
<style type="text/css">
* { margin:0; padding:0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; position:relative; overflow:hidden;}
html,body { height:100%;}
.top { position:relative; margin-top:-100px; height:100px; background:#f60;}
.side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto;}
.main { position:relative; overflow:hidden; height:100%; background:#f30; padding-top:100px; margin-top:-100px; top:50px; margin-left:200px; _margin-left:0; z-index:2;}
.main iframe { height:100%; width:100%; background:#fff; position:absolute; left:0; top:0;}
.bottom { position:relative; height:100px; background:#f60; clear:both;}
</style>
</head>
<body>
<div class="top">
top
</div>
<div class="side">
side
 
 
 
 
 
 
</div>
<div class="main">
<iframe frameborder="0" src=" http://www.g.cn/"></iframe >
 
 
 
 
 
 
</div>
<div class="bottom">
bottom
</div>
</body>
</html>

[Ctrl+A All selection tips: You can modify part of the code first, and then press Run]

An issue that should be noted :

Do not give overflow:hidden to the body, it will ruthlessly hide anything outside it Things, including top/bottom (header/footer);

one important point that should be understood :

The method of generating the height of [100%+(N)px]: div { height:100%; padding-top:(N)px;} .