<!DOCTYPE html>
<html>
<head>
<title>div_height_equal_width</title>
<style type="text/css">
#div1{
width:50%
background-color:lavender
margin:0 auto
}
</style>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById("div1")
var width = div1.offsetWidth
div1.style.height = width+"px"
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
css3有两个新单位，vw和vh,vw表示占用父元素宽度的百分比，vh表示父元素高度的百分比，如20vw表示元素宽度为父元素宽度的百分之二十，你设置宽度和高度都为20vw，就能实现正方形的效果。不过有个bug，就是现在浏览器对css3的支持度不是很大，有些浏览器不支持<div style="background:redpadding:10pxwidth:100px"><div style="height:500pxwidth:100pxbackground:#ccc"></div></div>你复制过去看看DIV 本来就是 高度、宽度随子DIV变化
你是不是设了 一些 FLOAT 属性？
那就要 float 元素结尾 加上
<div style=" clear:both"><div> 清楚浮动
最小高度 你试试这个
min-height:500px /*高度最小值设置为：100px*/
height:auto !important/*兼容FF,IE7也支持 !important标签*/
height:500px/*兼容ie6*/
