<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WiseInfo</title>
<style type="text/css">
<!--
* {
margin:0px;
padding:0px;
}
html, body {
height:100%;
overflow: hidden;
}
html>body { /*-- for !IE6.0 --*/
width: auto;
height: auto;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
body {
border:8px solid #ffff00;
background-color: #ffffff;
}
#mainDiv {
width: 100%;
height: 100%;
_padding-left:160px;
}
#rightDiv {
width: 100%;
height: 100%;
_padding:100px 0px;
}
#mainDiv>#rightDiv {
width:auto;
position:absolute;
left:160px;
right:0px;
}
#leftDiv {
width:156px;
height:100%;
background-color:#99FF33;
position:absolute;
top:0px;
left:0px;
}
#centerDiv {
width: 100%;
height: 100%;
background-color:#00CCFF;
}
#rightDiv>#centerDiv {
height:auto;
position:absolute;
top:100px;
bottom:100px;
}
#topDiv {
height:96px;
width:100%;
background-color:#9933FF;
position:absolute;
top:0px;
}
#bottomDiv {
height:96px;
width:100%;
background-color:#FF9900;
position:absolute;
bottom:0px;
_bottom:-1px; /*-- for IE6.0 --*/
}
-->
</style>
</head>
<body>
<div id="mainDiv">
<div id="leftDiv"></div>
<div id="rightDiv">
<div id="topDiv"></div>
<div id="centerDiv" style="overflow:auto;"> 阿飞撒旦发啊是发送方啊沙发
<h1 style="width:3000px; height:2000px; background-color:#F00;"></h1>
</div>
<div id="bottomDiv"></div>
</div>
</div>
</body>
</html>
http://www.cnblogs.com/devbar/archive/2009/04/22/1441386.html
分享到:
相关推荐
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
div宽度自适应布局(左边自适应)
div+css菜单导航布局自适应宽度,纯div+css
div宽度自适应布局(右边自适应)
div+css模板布局 右侧固定,左侧自适应
CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
NULL 博文链接:https://javapub.iteye.com/blog/709361
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE 第二天:什么是名字空间 ...第九天:第一个CSS布局实例 第十天:自适应高度 十一天:不用表格的菜单 十二天:校验及常见的错误
脚本控制DIV三行三列布局自适应高度
demo包括: 1、多个div并排,宽度自适应100% - 左右两侧div宽度固定,中间DIV占满剩余区域 ; 2、多个div,高度自适应100% - 页面布局:头,身体,脚,占满整个屏幕;
div+css布局 三行三列 中间自适应
在DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题,本文将介绍左右自适应高度一致的Jquery与DIV高度自适应屏幕的js
html5新标签使用header、footer、nav、section布局,css设定及使用方法
独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局。通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的...
Div+Css网页版式布局 包括固定宽度和自适应宽度的网页版式布局 对于初学者和有研究者都是不错的资源哦 本人感觉实用性比较强
脚本控制三行三列自适应高度DIV布局
每当进行页面布局时,我们都有这样的需求,就是当子元素div高度不确定时父div自适应高度,本文整理的多种方法可以解决此问题,感兴趣的朋友可以参考下
div+css,web标准,div+css布局,div+css实例,div+css模板
其中一个就是datagrid不能很好的布局。想了好多办法都有局限。最后想到会不会是布局的问题,经过实践,最后问题解决。 1:比如在项目中用到了datagrid。如果界面比较简单---只有一个datagrid只需要把它的属性fit ...