何为高度自适应?

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

布局思路

在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. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  3. css实现自适应屏幕高度;

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  4. CSS两列高度自适应,右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  6. CSS: 解决Div float后,父Div无法高度自适应的问题

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  7. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  8. css 实现文字自动换行切同行元素高度自适应

    1.实现div行内布局所有行跟随最大高度自适应 html代码样例: <div class="row-single"> <div class="colsp ...

  9. css控制元素高度自适应

    可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...

随机推荐

  1. Hadoop及其相关组件简介

    一.大数据介绍 1.大数据指的是所涉及的数据量规模巨大到无法通过人工,在合理时间内达到截取.管理.处理.并整理成为人类所能解读的形式的信息. 2.大数据,可帮助我们能察觉商业趋势.判断研究质量.避免疾 ...

  2. Nhibernate Icreteria 分页查询

    1.创建查询条件,条件为一个ICreterion的列表 ///        /// 创建Criteria(不含order,因为获取总数的时候,为了性能考虑,不加order)        ///   ...

  3. zipline-- 开发指南

    Development Guidelines开发指南This page is intended for developers of Zipline, people who want to contri ...

  4. node.js+mongodb 爬虫

    demo截图: 本demo爬瓜子二手车北京区的数据 (注:需要略懂 node.js / mongodb 不懂也没关系 因为我也不懂啊~~~) 之所以选择爬瓜子二手车网站有两点: 一.网站无需登录,少做 ...

  5. 如何将自己的jar包发布到mavan中央仓库

    最近自己写了一个关于网关限流的插件,然后想着肯定会有很多兄弟也需要使用到,所以就想着把jar包上传到Maven的中央仓库上让大家可以更方便的使用 现在咱们来看一下这个流程是什么样的呢. 首先呢,你得去 ...

  6. VMware打开虚拟机没反应的解决方案(全面汇总)

    VMware打开虚拟机无反应的解决方案(全面汇总)虚拟机没反应的解决办法大概是如下几点:一.若是第一次安装后打不开虚拟机,大致是如下两种解决方案: 1.大多数时候,虚拟机打不开都是因为防火墙拦截所致 ...

  7. How to add Leading Zeroes to a Number (Delphi Format)

    How to add Leading Zeroes to a Number (Delphi Format) Here's how convert (an integer) number to a st ...

  8. [SCOI2009]粉刷匠

    线性DP预处理+分组背包 首先设dp[i][j][0/1]表示该木板前i个格刷了j次且最后一次颜色为0/1的最大正确数 做下0/1的前缀和然后转移状态 dp[i][j][k]=max(dp[l][j] ...

  9. Servlet:从入门到实战学习(3)---Servlet实例【图文】

    本篇通过图文实例给大家详细讲述如何建立一个Servlet,配置好运行环境并成功连接到MYSQL的数据库,进行数据的查询展示. 1.项目创建:IDEA -> Create New Project ...

  10. Web开发中的6个坏习惯

    在 Usersnap,我们在能很好的组织网站开发有超过20(总和)年的经验.我们认为这些过去的经验能让我们很好的分辨出什么是好.坏和丑陋的网站开发.如今我们不想把注意力放在消极的部分,但就这一次,我们 ...