中财网刀尖60度图解:两列高度未知的情况下，css + div两列高度自适应
来源：百度文库 编辑：中财网 时间：2024/04/29 04:13:18
两列高度未知的情况下，css + div两列高度自适应
2011-07-30 12:04:49
高度自适应一直是一个困扰着csser的问题 今天在这里向各位介绍一个较为简单的解决高度自适应的方法
我们以两列情况的布局为例 如下图：
我要的布局效果是 不管左侧和右侧哪个内容多 哪个高度高 都以高的为准
在网上找了一些相关资料 解决办法比较多 但个人觉得还是用负外边界和内补丁相结合的办法来解决最简单也最为实用
说一下具体的做法：
①两列div最外面设置一个box 并设置超出部分隐藏 overflow:hidden 并设置宽度width（这个宽度的具体值视左右两列的宽度而定）
②left和right这两个div都设置margin-bottom:-9999px;padding-bottom:9999px;
基本上做到以上两点 我们的问题就可以很漂亮的搞定了
一切尽在我们掌握中 看起来很完美 是吗？
事情并非我们所想象 网上的很多实例 都是针对两列均为背景色而言 并没有像我上图那样左侧一列div有边框
因为在实际工作布局所需效果中 我们往往需要给左列的div加个边框啊什么的
那好啊 要边框的话 我们就加border好了 这不是so easy吗？恩 是的 起初 我也很你是一样的想法
但当我真正把border加上去后 问题出现了 左列的div只有左上右三个边框 没有底边框 咦？这是怎么回事呢？我想 问题的原因应该是margin-bottom:-9999px;padding-bottom:9999px;这个造成的 我不想多加追究了···我很忙 我要搞定这个问题···
我曾经试过很多种办法 我想既然左列的div设置了margin-bottom:-9999px;padding-bottom:9999px; 导致底边框不能显示 那我就在左列div里再加一个div 再对这个div设置border不就行了吗？恩 是的 我重写CSS 预览 咦 真的可以了也 我激动万分 可遗憾的是 这个办法只适应左列的内容比内容多 也就是说只适应左列的高度比右列的高度高 一旦内容没右列的高 内容少于右列的内容 那个底边框就紧贴着内容的下边缘 并不是到底 那不得不对这个div也设置margin-bottom:-9999px;padding-bottom:9999px; 但这样设置的话 又回到我们的老问题 底边框不能显示 我的功夫白费了···咳····
既然这样不行 那我们就换个思路 我用超级无敌的overflow来帮我搞定这个问题吧
我在最外面的box的后面加上了这句：
宽度是这个左列div的实际宽度 1像素的高度 背景颜色是这个div的背景颜色 超出部分隐藏 为什么要让它相对定位 并且让它居上-1px呢 因为这个div（实际上就是左列div的底边框）是紧跟在最外面的box后面的 也就是说它会紧跟着那个高的div后面 这样它总会高出1px 所以为了与其平齐 我就设置了top：-1px 尽管这是个小问题 我们还是要精益求精 呵呵···
至此 带边框的自适应问题终于解决了