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

    题意: 给n个矩形,问包含这些矩形的尽量小的凸多边形的面积是多少; 思路: 由于给的矩形的形式是给出了中心的坐标,长和宽以及旋转的角度,所以先转换成四个点的坐标,然后求一遍凸包就好了,第一次写凸包,代 ...

  2. [ORACLE错误]ORA-00001: unique constraint (...) violated并不一定是数据冲突

    遇到这种情况,重建完表和索引后,终于正常INSERT了.  prompt Importing table COUPON_ACTIVITYset feedback offset define offin ...

  3. Maya FEM节点框架完成

    这几天把物理模拟框架移植到maya之中了. maya编程有一点比较关键,就是要让自己的程序逻辑适应maya的节点求值机制.在物理模拟中,往往需要进行时间积分,对此我的解决办法是,写一个节点rigSim ...

  4. 各种各样的hack。

    http://itakeo.com/blog/2015/11/16/allhack/?none=123 Android Selector Hacks .selector:not(*:root) {} ...

  5. Linux及安全——ELF实践

    Linux及安全——ELF实践  一.分析ELF文件头 二.通过文件头找到section header table,理解内容 三.通过section header table 找到各section 四 ...

  6. 郝文菲get技能的经验--20155308

    郝文菲get技能的经验--20155308 比其他人更好的技能 谈到自己的特长,作为新一代成长的自己来说,有一箩筐的话可以说.但是若是谈到自己比大多数人更好的技能,我却觉得回答这个问题有很大的难度.当 ...

  7. 崩溃日志记录工具Crashlytics

    http://try.crashlytics.com 申请账号,通常一两天 设置工程 后期更新,个人感觉使用这个很麻烦

  8. 问卷调查——答卷

    1.你对自己的未来有什么规划?做了哪些准备?答:对未来的规划,就是像大多数人一样,在学校里有一个好的成绩,掌握扎实的专业基础,然后在国考上得到一个好成绩,得到一个好的工作机会,然后努力工作.目标很简单 ...

  9. 慢牛股票-基于Sencha+Cordova的股票类APP

    13,14这两年,我的业余时间都花在了移动互联网技术和股票技术分析上,14年底,终于开发完成慢牛,上线小米应用商店.应用宝.百度应用商店.   慢牛是一款数据分析类的股票APP,提供数据订阅和数据分析 ...

  10. VS2010版快捷键

    VS2010版快捷键 Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O ...