何为高度自适应？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单，在兼容浏览器方面也稍微复杂一些。

布局思路

在IE7+及chrome、firefox等浏览器中，高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的，但这一法则在IE6中并不适用，因此在IE6中还得另辟蹊径。在IE6中给html设定padding,并不会撑大html元素的尺寸，这正是我们要利用的地方。

下面的这段代码没管Ie，在chrome下显示正常：

<style>

body,div{

    margin:0;

    padding:0;

    color:#f00;

}

.top{

    background:#36c;

    height:100px;

}

.main{

    background:#f90;

    width:100%;

    position:absolute;

    top:100px;

    bottom:0;

}

</style>

</head>

<body>

<div class="top">wo shi top</div>

<div class="main">wo shi main</div>

</body>

如果把position:absolute注释掉。则显示：

可以看到main只根据内容占了一行。

推广

这种方法也适用于顶栏与底栏高度固定，中间那栏高度自适应的三栏布局.

如果我们把position改成relative，则显示如下：

relative，设置top，left只是相对于原来的文字偏移而已



												


											
css高度自适应的更多相关文章
	

    
								
  1. CSS高度自适应 height:100%;
		
    在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE htm ...
    
		
    2. 
						
  2. css经典布局——头尾固定高度中间高度自适应布局
		
    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
    
		
    3. 
						
  3. css实现自适应屏幕高度；
		
    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
    
		
    4. 
						
  4. CSS两列高度自适应，右边自适应
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    5. 
						
  5. 典型的DIV CSS三行二列居中高度自适应布局
		
    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...
    
		
    6. 
						
  6. CSS: 解决Div float后，父Div无法高度自适应的问题
		
    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...
    
		
    7. 
						
  7. css实现div中图片高度自适应并与父级div宽度一致
		
    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
    
		
    8. 
						
  8. css 实现文字自动换行切同行元素高度自适应
		
    1.实现div行内布局所有行跟随最大高度自适应 html代码样例: <div class="row-single"> <div class="colsp ...
    
		
    9. 
						
  9. css控制元素高度自适应
		
    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. sql 2012 操作EXCEL 2013
			
    确认是否有Microsoft.ACE.OLEDB.12.0数据接口 --进行配置: EXEC sp_configure 'show advanced options', 1 GO RECONFIGUR ...
    
			
    2. 
						
  2. chapter1 渗透测试与metasploit
			
    网络对抗技术课程学习 chapter1 渗透测试与metasploit 一.读书笔记 二.渗透测试 通过模拟恶意攻击者的技术与方法进行攻击,挫败目标系统安全控制措施,取得访问控制权,并发现具备业务影响 ...
    
			
    3. 
						
  3. [测]jieba分词
			
    import jieba import os import jieba.analyse with open('src.txt', 'r') as file: data = file.read() se ...
    
			
    4. 
						
  4. 将Linux文件清空的几种方法
			
    1.使用重定向的方法 [root@centos7 ~]# du -h test.txt .0K test.txt [root@centos7 ~]# > test.txt [root@cento ...
    
			
    5. 
						
  5. MongoDB数据导入导出成csv或者json
			
    1. 从远程数据表拉取数据到本地json文件 mongoexport --host 远程服务器IP --port 远程服务器端口 --username 远程数据库用户名 --password 远程数据 ...
    
			
    6. 
						
  6. PHP入门篇
			
    一.PHP-什么是变量  变量是用于存储值的,我们命令服务器去干活的时候,往往需要产生一些数据,需要临时性存放起来,方便取用.我们也可以理解为,变量就像一个购物袋,我们可以用来装苹果.榴莲(当然也可以 ...
    
			
    7. 
						
  7. MY SQL8.0里程碑发布
			
    MySQL 开发团队于 12 日宣布 MySQL 8.0.0 开发里程碑版本(DMR)发布! 可能有人会惊奇 MySQL 为何从 5.x 一下跳跃到了 8.0.事实上,MySQL 5.x 系列已经延续 ...
    
			
    8. 
						
  8. C#获取程序集自动增加的版本号和编译时间
			
    1. 首先找到文件AssemblyInfo.cs, 路径如下: 2. 修改版本的格式,修改后,程序每次编译,程序集的版本号都会自增. 修改前: [assembly: AssemblyVersion(& ...
    
			
    9. 
						
  9. Web服务器的工作原理
			
    Web服务器的工作原理 Web服务器工作原理概述 很多时候我们都想知道,web容器或web服务器(比如Tomcat或者jboss)是怎样工作的?它们是怎样处理来自全世界的http请求的?它们在幕后做了 ...
    
			
    10. 
						
  10. sublime插件 cssComb实现css自动排序及格式化
			
    cssComb是一个实现css代码自动排序,当然顺便也实现了代码的格式化 安装: 首先需要打开sublime搜索安装csscomb插件(前提是已经安装了sublime的package control) ...
    
			
    11.