<!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" />
<title>框架</title>
<style type="text/css">
/*-------------------公用樣式---------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
body { height: 100%; max-height: 100%; overflow: hidden; border: 0; font: 12px/20px Arial, Helvetica, sans-serif; -moz-user-select: -moz-none; }
.minwidth { min-width: 600px; }
.clearfix { _zoom: 1; }
.clearfix:after { content: "."; display: block; visibility: hidden; clear: both; height: 0px; }
html { height: 100%; overflow: hidden; _padding: 45px 0 76px; }
/*框架*/
.default-main { position: absolute; _position: relative; top: 44px; _top: auto; bottom: 75px; _bottom: auto; width: 100%; _height: 100%; overflow: hidden; }
.main-wrapper { _margin: 0 252px 0 172px; height: 100%; }
.mb-layout-hd, .mb-layout-ft { background:red; overflow-y: visible; z-index: 40; }
.mb-layout-bd { position: absolute; height: 100%; }
.mb-layout-hd { height: 45px; position: absolute; top: 0; left: 0; width: 100%; }
.mb-layout-ft { height: 76px; position: absolute; bottom: 0; left: 0; width: 100%; overflow: auto; text-align: right; }
.column1 { left: 0; }
.column1 { background:blue; width: 171px; border-right: 1px solid #c1c1c1; overflow: auto; }
.column2 { _width: 100%; left: 172px; right: 251px; }
.column3 { right: 0; background:#ddd; width: 250px; border-left: 1px solid #c1c1c1; }
</style>
</head>
<body>
<!--S中間-->
<div class="default-main">
<div class="main-wrapper">
<div class="mb-layout-bd column1">column1</div>
<div class="mb-layout-bd column3">column3</div>
<div class="mb-layout-bd column2">column2</div>
</div>
</div>
<!--E中間-->
<!--S頭部-->
<div class="mb-layout-hd"></div>
<!--E頭部-->
<!--S底部-->
<div class="mb-layout-ft minwidth"> </div>
<!--E底部-->
</body>
</html>
div+css佈局鋪滿屏幕
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章