<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
<title>One Hundred Percent Height divs</title> 
<style type="text/css" media="screen"> 
body { 
margin:0; 
padding:0; 
height:100%; /* this is the key! */ 
} 
#left { 
position:absolute; 
left:0; 
top:0; 
padding:0; 
width:200px; 
height:100%; /* works only if parent container is assigned a height value */ 
color:#333; 
background:#eaeaea; 
border:1px solid #333; 
} 
.content { 
margin-left:220px; 
margin-right:220px; 
margin-bottom:20px; 
color:#333; 
background:#ffc; 
border:1px solid #333; 
padding:0 10px; 
} 
#right { 
position:absolute; 
right:0; 
top:0; 
padding:0; 
width:200px; 
height:100%; /* works only if parent container is assigned a height value */ 
color:#333; 
background:#eaeaea; 
border:1px solid #333; 
}

#left p { 
padding:0 10px; 
} 
#right p { 
padding:0 10px; 
} 
p.top { 
margin-top:20px; 
} 
</style> 
</head>

<body> 
<div id="left"> 
<p class="top">This design uses a defined body height of 100% which allows setting the 
contained left and right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and 
right divs at 100% height.</p>

<p>This design uses a defined body height of 100% which allows setting the contained left and 
right divs at 100% height.</p> 
</div>

<div class="content"> 
<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div>

<div class="content"> 
<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div>

<div class="content"> 
<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div>

<div id="right"> 
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top 
using margin-top:20; is applied to the first paragraph of each outer divs.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p>

<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div> 
</body> 
</html>

http://www.webmasterworld.com/forum83/200.htm

来自：

一个DIV三列布局100%高度自适应的好例子（国外）的更多相关文章

  1. CSS学习笔记（6）--浮动，三列布局，高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  2. 转载 html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）

    原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...

  3. 用一个div模拟textarea并实现高度自适应

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  4. DIV左、中、右三列布局的各类情况说明

    一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...

  5. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  6. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  7. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  8. html 三列布局（两列自适应，一列固定宽度）

    不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...

  9. CSS三列布局之左右宽度固定，中间元素自适应问题

    最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...

随机推荐

  1. cocos2dx 安卓编译问题收集

    问题: 新的cocos2d-x 2.2.5 在使用Eclipse的安卓NDK 9 的编译器进行编译的时候,问题提示如下: [armeabi] Compile++ thumb: cocos_extens ...

  2. java笔记--反射进阶之总结与详解

    一.反射进阶之动态设置类的私有域 "封装"是Java的三大特性之一,为了能更好保证其封装性,我们往往需要将域设置成私有的, 然后通过提供相对应的set和get方法来操作这个域.但是 ...

  3. HDU 4915 Parenthese sequence

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4915 解题报告:从前往后遍历一次,每次判断')'的数目是不是满足 n < (i +1)/ 2,从 ...

  4. xcode arc引起的autorelease报错问题

    http://blog.csdn.net/xiechengfa/article/details/37971223 自从用上了真苹果,一直升级,现在xcode版本是4.4,或者说是ios5 一直有个问题 ...

  5. [BZOJ2959]长跑——新技能：LCT+缩圈

    [BZOJ2959]长跑 试题描述 某校开展了同学们喜闻乐见的阳光长跑活动.为了能“为祖国健康工作五十年”,同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上熙熙攘攘 ...

  6. HDOJ 2095

    find your present (2) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/1024 K (Java/Oth ...

  7. emu1

    第一题 一个很奇怪的贪心.先排序一遍,再扫描一遍,能加入尽量加入,不能加入就一定不能加入..由于每次都在可能的最早时间加入一个数可以保证差最小?反正差不多这样了. O(n log n) #includ ...

  8. MySQL建立索引的注意事项

    对于大数据量的表格,尤其是百万行以上的数据表,一定要对其建立索引,否则查询速度极慢.(参考后面的测试结果)建立索引时需注意: MySQL的索引有两种:单列索引(即在某一列上建索引).多列组合索引(即在 ...

  9. FireFox下上传控件的显示问题

    Chrome正常 FireFox显示不正常 上传控件一直有个问题,就是样式问题,解决方法就是用一个大的背景层挡住,然后点大的背景层去触发上传控件的Click事件. Html: <span id= ...

  10. Search a 2D Matrix | & II

    Search a 2D Matrix II Write an efficient algorithm that searches for a value in an m x n matrix, ret ...