在平时做DIV+CSS的开发中，经常会遇到，把一个div的高度固定，然后，里面在嵌套一个div，但是里面的div的内容增多的时候，可以把外面的div撑开，但同时又保证里面的div没有东西是，外面的div保持一定的高度。主要解决办法是在外面的div使用min-height这个属性，来保证他的高度，这个属性支持IE7以上各个版本和FF 、chrome等浏览器，但是IE6不支持，因此还要加多一个：_height 。
下面我做了一个demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*out 有它自己的最小高度200px，可以自动适应in的自动扩展*/
body {width:100%; height:100%;}
.out{
width:500px;
overflow:hidden; min-height:200px;
_height:200px; _overflow:auto;
background-color:#09C;
}
.in{
width:300px;
background-color:#FFF;
}
.bottom{
width:500px;;
height:60px;
background-color:#900;
}
</style>
</head>
<body>
</body>
<div class="out">
<div class="in">
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
</div>
</div>
<div class="bottom"></div>
</html>
分享到：
相关推荐
DIV自动适应高度，设置三个DIV高度始终保持一致，不管其中哪个高度变化都会保持DIV向最高的看齐
jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的...
让div+css兼容所有浏览器的一些注意事项
div模拟select兼容各浏览器，本人制作的小插件，解决下拉列表框不兼容的问题
js实现div随浏览器高度变化，主要是高度变化和实现滚动条，还有侧栏显示隐藏，可以作为一个地图开发界面的参考
div+css 高度100% 绝对有用适应任何浏览器
javascript获取设置div的高度和宽度兼容任何浏览器.docx
DIV弹出窗（兼容主流浏览器）
NULL 博文链接：https://xnbhnly.iteye.com/blog/1312073
这个很使用，用起来很方便，对于最新的火狐等等其它浏览器的问题都可以解决，
兼容多浏览器的强制不换行的CSS，主要以DIV为列子，分析个浏览器的解析特性
DIV半透明代码 兼容主流浏览器，需要的朋友可以参考下。
div+css浏览器兼容问题
点击按钮弹出一个层，其余部分遮罩，右上角有关闭功能，兼容各大浏览器
div+css布局时的浏览器兼容问题 请各位认真阅读此文本，对大家一定有很大的启发，也许会纠正很多你的错误认识哦。
vue自定义浏览器滚动条(已兼容ie)
div+css IE6/IE7/火狐等浏览器兼容问题解决办法
div+css浏览器兼容问题解决方法，不错，不错，不错……
介绍： 很多朋友都在问这个问题，div的内容图片垂直居中代码，这个代码兼容多浏览器。
DIV+CSS浏览器兼容方法,由于浏览器版本的问题。