css div高度设置_教程

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的高度改变了。

max-height是最大高度,除了ie6不支持,需要使用js外,其他ie7+,ff,chrome都支持,符合你的要求

也可以用纯js

var 最大高度 = 300

function a(){

if($('#test')[0].offsetHeight >最大高度) $('#test').height(最大高度)

}//你怎么调用a()就看你的了

</script>

div2的高度你定死了那就没办法要不你就把div2的高度变成自适应的

用js写这样写:

var div2=document.getElementById("div2")

var div3=document.getElementById("div3")

if(div2.style.height<div3.style.height)

{

div2.style.height=div3.style.height//把div3的高度给div2

}

</script>

下面不管你div3变得有多高~ div2总会自适应的跟上~不过你div2中的内容要有那么多才行哟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

div{border:1px solid red}

#main{width:100%height:100%}

#div1{height:autowidth:200pxfloat:left}

#div2{width:200pxfloat:leftheight:100%background-color:red}

#div3{width:200pxfloat:left}

</style>

</head>

<body>

<br/>

</div>

<br/>

</div>

</body>

</html>

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

css div高度设置