随笔档案

在使用 CSS 定位的时候，经常会遇到 <div> 嵌套中，被嵌套层增加高度而外层不能自动伸缩改变大小的问题

比如开始是这样定义的：



代码：

样式：

后来我在 div1 层里放上内容，这时 div1 层变高

.div1 {
  border: 2px solid #FF0000;
  float: left;
  width: 200px;
  height: 150px;
}

在 Firefox 下看（IE6 下可以自动伸缩），就变成了这样：



怎样才能用最简单的方法使 div3 层能自动适应里面的 div1 或 div2 层的变化呢

就是使用 overflow 属性

把 div3 中过去定位高度的 height: 100px; 换成 overflow:auto;

.div3 {
  border: 2px solid #0000FF;
  width: 400px;
  overflow:auto;
}

这样 div3 就可以自动调整高度了