html中div高度问题_随笔

如果可以不考虑IE67可以用display:table布局：

HTML：

</div>

</div>

CSS：

.outer{

background-color:blue

height:400px

display: table

width:100%

}

.inner-title{

background-color:#CCC

display:table-row

width:100%

height:100px

}

.inner-content{

background-color:#888

display:table-row

width:100%

}

IE6和IE7下估计只能用JS算高度了

原理：

先给父级<div>设置宽度（像素）

然后再子<div>里，设置百分比，如图示。

代码原件：

复制到<body></body>之间使用即可。

1、首先我们新建一个测试项目然后新建一个index.html、basic.js和basic.css文件。

2、js修改html文件中div的style中值来修改div的高度 HTML文件中的文件代码如图所示。

3、运行之后我们看到两个div的高度是一样的接下来我们就使用js修改高度。

4、这时我们敲js中的代码获取div1的id 使用css属性对应的style属性然后设置高度如图所示。

5、使用js修改CSS文件中的div的height的值 HTML文件中的代码。

6、然后我们是在js文件中获取div1的id属性然后使用obj.style.cssTest来修改嵌入式的css。

7、然后运行项目之后两次结果都是一样的 div的高度改变了。

欢迎分享，转载请注明来源：内存溢出

html中div高度问题