这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充、加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

  先看代码:

 #wrap{
  overflow: hidden;
} #sideleft, #sideright{
  padding-bottom: 32767px;
  margin-bottom: -32767px;
}

  实现原理:
  块元素必须包含在一个容器里。
  应用overflow: hidden 到容器里的元素。
  应用 padding-bottom(足够大的值)到列的块元素 。
  应用margin-bottom(足够大的值)到列的块元素。
  padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。

CSS布局自适应高度解决方法的更多相关文章

  1. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  2. iframe自适应高度解决方法 .

    <div id="leftBar"> <iframe name="tag" src="_iframe.html" styl ...

  3. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  4. float过后 高度无法自适应的解决方法

    float过后 高度无法自适应的解决方法: 在float层最外面包一层div即可.

  5. IE6/7/8 CSS兼容性问题和解决方法汇总

    断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...

  6. IE CSS Bugs 列表和解决方法

    我们在开发中我们常会在IE中遇到很多莫名的bug,尤其是老态龙钟的IE6浏览器.为了提高我们的开发效率,需要经常总结,整理工作中遇到的问题.我们在网络上找到的IE Bugs 资料是零散的.不过,在老外 ...

  7. 浏览器css bug及bug解决方法

    Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

  8. Div自适应高度的方法

    http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...

  9. Iframe 自适应高度的方法!

    第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

随机推荐

  1. vector中pair的排序方法

    直接上代码: bool judge(const pair<int,char> a, const pair<int ,char> b) { return a.first<b ...

  2. [转] Android实时抓包分析 : 善用adb调试桥

    Android实时抓包分析 : 善用adb调试桥   谈到android网络抓包,很多人都能想到牛逼轰轰的神器tcpdump.方法就是在android机器上面安装tcpdump,然后通过-w参数把抓包 ...

  3. StaticFileMiddleware中间件如何处理针对文件请求

    StaticFileMiddleware中间件如何处理针对文件请求 我们通过<以Web的形式发布静态文件>和<条件请求与区间请求>中的实例演示,以及上面针对条件请求和区间请求的 ...

  4. Linux 结束进程

    一个进程由于以下5个原因中的一个终止 --main函数调用return; --调用exit函数--C语言库函数: --调用_exit函数--系统调用 --调用abort函数 --被一个信号终止.(ki ...

  5. RTX与SVN使用手册适用于新手

    一.RTX使用说明 1.下载 http://rtx.tencent.com/rtx/download/index.shtml rtx下载地址(可以只下载客户端) 2.使用方法 1)点击最下面的服务器设 ...

  6. php基础08:改变数据类型

    <?php //1.获取数据类型 $num = 55; echo gettype($num); //integer //2.设置数据类型 settype($num, "string&q ...

  7. [原]iBatis.Net(C#)系列一:简介及运行环境

    转载请注明http://www.cnblogs.com/13590/archive/2013/02/27/2934580.html 摘要:介绍iBatis.Net的基本情况和运行原理,运行环境中各参数 ...

  8. ZooKeeper学习第五期--ZooKeeper管理分布式环境中的数据

    引言 本节本来是要介绍ZooKeeper的实现原理,但是ZooKeeper的原理比较复杂,它涉及到了paxos算法.Zab协议.通信协议等相关知识,理解起来比较抽象所以还需要借助一些应用场景,来帮我们 ...

  9. 动态执行SQL语句

    在实际制作过程中,需要动态的拼接SQL语句然后执行.具体代码如下: declare @columnName varchar(20),@tempName varchar(20) select @temp ...

  10. Python解析器源码加密系列之(二):一次使用标准c的FILE*访问内存块的尝试

    摘要:由于近期打算修改Python解释器以实现pyc文件的加密/解密,出于保密的要求,解密之后的数据只能放在内存中,不能写入到文件中.但是后续的解析pyc文件的代码又只能接受FILE*作为入参,所以就 ...