div仿框架的一个例子

测试通过div仿框架

[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系统:Windows]

 

<!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>利用box-sizing实现div仿框架</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

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>

<div class="main">

   main

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</div>

<div class="bottom">

    bottom

</div>

</body>

 

</html>

标签: div, 仿框架