这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充、加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. Django项目中如何建表?怎样导入数据?

    http://django-chinese-docs.readthedocs.org/en/latest/topics/db/models.html 通常在项目中的models.py文件中建表的 Th ...

  2. 我的Unity学习路线

    前言 上班的时间内都很忙在做项目,休息时间里闲下来了,却觉得没什么事做不自在.难道真是苦逼的命不会享受? 想了一下这一段时间以来的过程:先是重新看了一遍Unity的基础部分,然后买了<3D数学基 ...

  3. MongoDB学习(五)Linux环境安装MongoDB

    一.   下载 从http://www.mongodb.org/downloads地址中下载:mongodb-linux-x86_64-2.4.11.tar 二.  安装 1>设置mongoDB ...

  4. java 15 - 6 List的方法

    List集合的特有功能: A:添加功能 void add(int index,Object element):在指定索引处添加元素 B:获取功能 Object get(int index):获取指定索 ...

  5. 26Spring_的注解实际应用_关键整理一下之前的注解

    写一个银行转账案例, 案例结构如下:

  6. 如何免费访问Google?

    访问Google方法(以Mac为例) 1.替换hosts文件中的内容,文件链接如下: https://github.com/racaljk/hosts 2.下载Google浏览器,链接如下: http ...

  7. An Introduction to Interactive Programming in Python (Part 1) -- Week 2_3 练习

    Mini-project description - Rock-paper-scissors-lizard-Spock Rock-paper-scissors is a hand game that ...

  8. Java 征途:行者的地图 (转)

    http://www.cnblogs.com/mindwind/p/5251430.html Java 征途:行者的地图   前段时间应因缘梳理了下自己的 Java 知识体系, 成文一篇望能帮到即将走 ...

  9. LINUX SSH显示中文乱码

    ssh登陆后,执行: export LANG=zh_CN.gb2312就可以显示中文了.编辑/etc/sysconfig/i18n 将LANG="zh_CN.UTF-8" 改为 L ...

  10. [CareerCup] 5.4 Explain Expression ((n & (n-1)) == 0) 解释表达式

    5.4 Explain what the following code does: ((n & (n-1)) == 0). 这道题让我们解释一个表达式((n & (n-1)) == 0 ...