一个不错的CSS DIV布局,DIV高度自适应

简介:
<?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>



本文转自94cool博客园博客,原文链接:http://www.cnblogs.com/94cool/archive/2012/11/20/2779385.html,如需转载请自行联系原作者
相关文章
|
2月前
|
前端开发 JavaScript 容器
CSS 实战录: 双栏、四等分、不等间距、自适应...
CSS 实战录: 双栏、四等分、不等间距、自适应...
112 0
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
1月前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
21 1
|
1月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
1月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
2月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
67 4
|
7月前
|
容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
|
前端开发 容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
114 0

热门文章

最新文章