一个DIV三列布局100%高度自适应的好例子(国外)
<?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%高度自适应的好例子(国外)的更多相关文章
- CSS学习笔记(6)--浮动,三列布局,高度宽度自适应
百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...
- 转载 html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)
原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...
- 用一个div模拟textarea并实现高度自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- DIV左、中、右三列布局的各类情况说明
一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- DIV+CSS 网页布局之:三列布局
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
- html 三列布局(两列自适应,一列固定宽度)
不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...
- CSS三列布局之左右宽度固定,中间元素自适应问题
最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...
随机推荐
- C# Web开发打开下载对话框代码
一个按钮的事件中写: string filename = Sever.UrlEncode("词库.txt"); Response.AddHeader("Content-D ...
- docker commit容器
docker commit 容器ID 镜象REPOSITORY 镜象TAG 如docker commit 52b41c68ac7b registry.lenovows.com:5000/video-a ...
- 新的开始---cocos2d
今天是一个新的开始,cocos2d的环境搭配好了,并且打包案桌apk的环境也搭配好了,安卓的这个搭配环境还是出了一点问题,前面弄了两个晚上(11-12.30)没弄出来,中间好几天都没有去弄,今天光棍节 ...
- Linux zabbix 配置注意事项
发现php-fpm启动之后,找不到 php-fpm.pid文件??? vi php-fpm.conf 去掉里面那个 pid = run/php-fpm.pid 前面的分号然后再启动php-fpm才能自 ...
- Decompiled .class file,bytecode version:51.0(Java 7) Source for 'Android API 23 Platform' not found
今天在Android Studio中访问Java源码的时候,代码上方出现如下提示: 而且方法体中显示介样内容: throw new RuntimeException("Stub!" ...
- 代码风格与树形DP
Streaming很惨,不过因为比赛之间没有提交过就没掉(或掉了)rating.第二题是一个树形DP,但是我都在想第一题了,简直作死. 看着神犇的代码我也是醉了...各种宏,真是好好写会死系列. 看到 ...
- Master-Worker模式
并行程序设计模式--Master-Worker模式 简介 Master-Worker模式是常用的并行设计模式.它的核心思想是,系统有两个进程协议工作:Master进程和Worker进程.Master进 ...
- SQL小技巧小知识
1.[ ]的使用 当我们所要查的表是系统关键字或者表名中含有空格时,需要用[]括起来,例如新建了两个表,分别为user,user info,那么select * from user和select * ...
- Java for LeetCode 052 N-Queens II
Follow up for N-Queens problem. Now, instead outputting board configurations, return the total numbe ...
- codeforces B. Semifinals 解题报告
题目链接:http://codeforces.com/problemset/problem/378/B 题目意思:有n个参赛者,他们都需要参加两场半决赛.第一场半决赛的成绩依次是a1, a2, ... ...