这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充、加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. ZOJ 3157 Weapon --计算几何+树状数组

    题意:给一些直线,问这些直线在直线x=L,x=R之间有多少个交点. 讲解见此文:http://blog.sina.com.cn/s/blog_778e7c6e0100q64a.html 首先将直线分别 ...

  2. Android开发环境搭建(转)

    转载:http://www.cnblogs.com/zoupeiyang/p/4034517.html#1 引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想 ...

  3. Unity开发之NGUI系列

    Unity插件收集 在Unity开发过程中会收集一些插件,收集这些插件的目的并不是我喜欢在开发中使用插件,而是本着喜欢的态度去收集的,就像我喜欢收集模型一样: 还有一点就是通过了解插件能让我知道Uni ...

  4. Dvwa writeup

    DVWA(Dam vulnerable Web Application)是使用PHP+Mysql编写的一套用于常规漏洞教学和漏洞挖掘的一个测试学习程序,在此程序中包含了常见的web方面的漏洞,如命令行 ...

  5. EventBus (四) Sticky事件

    什么是Sticky事件? 关于Sticky事件有的同学可能不是很熟悉,Sticky的意思是粘性的.在Android开 发中,Sticky事件只指事件消费者在事件发布之后才注册的也能接收到该事件的特殊类 ...

  6. 16进制色值转换成RGB

    #51147f  转换成RGB ,5*16+1 ,1*16+4,7*16+15 #A9A9A9 转换成RGB ,A*16+9 ,A*16+9,A*16+9

  7. 在文本中匹配链接并添加A标签

    (?<!href="|">)(https?:\/\/[\w\-\.!~?&=+\*\'(),\/]+)((?!\<\/\a\>).)* 这个正则可以 ...

  8. C# 无边框窗体的最小化问题

    WinForm在窗体风格设置成None时无法最小化的问题.添加以下代码即可实现最小化: protected override CreateParams CreateParams { get { con ...

  9. php基础24:数组range

    <?php $numbers = range(1, 10); echo "<pre>"; var_dump($numbers); echo "</ ...

  10. GEOS库学习之四:几何关系判断

    原理上一篇已经介绍过了,这篇就直接进行程序练习 #include "geos.h" GeometryFactory factory; //创建一条环线,与线的区别就是环线是闭合的. ...