博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个不错的CSS DIV布局,DIV高度自适应
阅读量:6705 次
发布时间:2019-06-25

本文共 1592 字,大约阅读时间需要 5 分钟。

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
">

<html xmlns="
">

<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,如需转载请自行联系原作者
你可能感兴趣的文章
可能是最好用的安卓系统,MIUI是怎么研发的?今晚直播!
查看>>
“房间里的大象”暴露AI巨坑,AI视觉系统被夸嘘过头了?
查看>>
别把每一餐,都吃成了快餐
查看>>
睡觉还能睡得高科技?没错,它能让你从此走向健康睡眠的道路!
查看>>
再跨界!华为联袂设计先锋RICOSTRU,诠释科技新美学
查看>>
51Talk CFO赖佑明2019年1月1日退休 联席CFO徐珉接任
查看>>
微软牵手Apache Kafka,第一个将其引入云端生产环境
查看>>
北京地铁新机场线列车亮相调试 设计时速160公里/小时
查看>>
react-router browserHistory刷新页面404问题解决
查看>>
你知道 koa 中间件执行原理吗?
查看>>
Redis 中的事件循环
查看>>
css布局基础总结
查看>>
Koa源码解析
查看>>
webpack系列之一总览
查看>>
乌龙事件之chrome页面部分白屏
查看>>
FP 视角下的领域驱动设计
查看>>
玩转iOS开发:iOS中的Socket编程(二)
查看>>
如何打造BCH使用的刚性需求?
查看>>
一个小需求引发的思考
查看>>
JSX,了解一下?
查看>>