<?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+css`实现高度自适应： ```css /* 定义全局样式 */ body, html { height: 100%; margin: 0; } #wrap { display: flex; flex-direction: column; align-items: ...
总结起来，"div宽度自适应布局(左边自适应)"是一种结合了`div`元素、CSS样式以及响应式设计技术的布局方法，它确保了网页在不同屏幕尺寸下的可用性和可读性。通过理解并熟练运用这些技术，开发者可以构建出适应性强...
总的来说，CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的布局和JavaScript辅助，可以创建出适应不同屏幕尺寸的响应式网页，确保在各种设备上提供良好的用户体验...
本主题聚焦于"div+css菜单导航布局自适应宽度"，这是一种确保导航栏在不同屏幕尺寸下都能良好展示的技术。这种技术在响应式网页设计中尤为重要，因为现代网站需要在手机、平板电脑和桌面电脑等不同设备上提供一致的...
5. **Grid布局**：CSS Grid布局同样提供了一种方式让div自适应高度。设置`grid-auto-rows: auto;`可以让每一行根据内容自适应高度。如果需要JavaScript辅助，可以监控内容变化，然后重新定义grid的行高。 以上就是...
在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...
在网页设计领域，`DIV+CSS`是一种常见的布局方式，它通过HTML的`<div>`元素结合CSS（层叠样式表）来实现页面结构和样式的分离，提高了代码的可维护性和网页的加载效率。本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV...
本知识点主要围绕"div+css模板布局 右侧固定，左侧自适应"这一主题展开。 在这样的布局模式中，右侧通常设置为一个固定宽度的区域，无论浏览器窗口大小如何变化，其宽度始终保持不变，常见于侧边栏、导航菜单等元素...
本文将详细探讨如何使用这些标签以及CSS来实现一个上下固定、中间自适应的布局。 首先，`<header>`标签用于定义页面的头部，通常包含网站的logo、导航链接等元素。例如： ```html 网站标题 <li><a href="#...
本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先，让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们...
在网页设计领域，Div+CSS是构建网页布局的主流技术之一。Div（Division）是HTML中的一个块级元素，常用于组织和分隔页面内容，而CSS（Cascading Style Sheets）则是用来控制网页样式和布局的重要工具。本篇文章将...
本资源"脚本控制DIV三行三列布局自适应高度.rar"提供了一种解决方案，利用JavaScript（JS）来实现一个三行三列的布局，并且每个单元格（DIV）的高度能够自适应内容。这种布局方式尤其适用于响应式网页设计，确保在...
总结来说，CSS实现div宽度根据内容自适应主要有`display: inline-block`、Flexbox和Grid布局等方法。选择哪种方法取决于项目需求、浏览器兼容性和个人喜好。在实际开发中，通常会结合使用这些技术，以实现最佳的跨...
总的来说，这个“CSS3自适应浏览器页面框架布局代码”资源提供了一个简单但实用的起点，帮助开发者快速构建适应各种设备的网页布局。通过学习和应用这些技术，开发者可以创造出既美观又具有高度适应性的现代网页。...
在网页设计中，让一个`div`元素的高度自适应浏览器高度是一个常见的需求，尤其是在创建全屏背景、响应式布局或者动态内容填充时。这个需求看似简单，但有时却容易让人困惑，因为仅设置`div`的高度为`100%`并不总是...
《DIV+CSS 网站布局实录》是一本深入探讨使用DIV和CSS进行网站布局技术的专业书籍。在网页设计领域，DIV+CSS已经成为构建现代、响应式和可维护网站的标准方法。本教程通过随书源码，为读者提供实践操作的机会，帮助...
以下是一个常见的例子，展示如何使多个div并排且宽度自适应100%： ```html <!DOCTYPE html> .container { display: flex; justify-content: space-between; } .fixed-width { width: 200px; /* 固定...
本教程将详细介绍如何使用 `div` 和 `css` 创建一个自适应的 `Tab` 控件。 首先，我们需要理解 `div` 的概念。`div` 是 HTML 中的一个块级元素，全称为 "division"，用于对网页内容进行分组和布局。在 `Tab` 实现中...
12天学会DIV+CSS从理论到实践的教程，强烈推介。 第一天：选择什么样的DOCTYPE 第二天：什么是名字空间 ...第九天：第一个CSS布局实例 第十天：自适应高度 十一天：不用表格的菜单 十二天：校验及常见的错误