css div高度设置
css如下
求大神!!! 展开
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的高度改变了 。
div对象设置高度样式,一般分为设置固定高度,最小高度、最大高度、自适应高度。
例如:DIV对象的class css命名“.div-height”,为了观察到效果,我们对div盒子加css边框样式,设置div宽度 width为300px。
一、设置固定高度:
1、固定高度实例html源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>固定高度</title>
<style>
.div-height{border:1px solid #F00; width:300px; height:200px}
</style>
</head>
<body>
<div class="div-height"></div>
</body>
</html>
要对div设置固定的高度,只需设置css height样式即可。
二、div设置最小高度:
设置最小高度意思,DIV有最小的高度状态,当内容多了,最小高度(min-height)装不下后,DIV高度会随内容真多而自适应高度。
最小高度min-height实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>最小高度</title>
<style>
.div-height{border:1px solid #F00; width:300px; min-height:200px}
</style>
</head>
<body>
<div class="div-height"></div>
</body>
</html>
最小高度IE7及以上版本支持,IE6不支持最小高度,但可以css解决IE6 最小高度;
三、对DIV设置最大高度
解释最大高度,设置大高度,意味着DIV能装下最多最大高度能容下的内容。
设置了最大高度max-height,从排版布局上看不出效果,当内容多余最大高度能装下内容才能看出最大高度样式效果。
div设置最大高度html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>最大高度</title>
<style>
.div-height{border:1px solid #F00; width:300px; max-height:200px}
</style>
</head>
<body>
<div class="div-height">
<p>DIVCSS5</p>
<p>DIVCSS5</p>
<p>DIVCSS5</p>
<p>DIVCSS5</p>
<p>DIVCSS5</p>
<p>DIVCSS5</p>
<p>你好</p>
</div>
</body>
</html>
四、div自适应高度 :
设置div自适应高度,自适应高度样式为height:auto,没错。但不设置高度height样式,不使用height高度样式,其实DIV高度就是自适应的。所以想设置DIV的高度为自适应,那就无效设置height样式,自然就是自适应高度了。
html和body都要设置100%,如下:
html,body{height:100%;margin:0px;padding:0px}
我明白了,你是有一个DIV非常高导致超出了范围对吧,那要解决铺满页面这个问题最简单的就是JS实现了:
<html>
<head>
<style>
html,body{height:100%;margin:0px;padding:0px;}
#main{width:100%;background-color:blue;}
#content{height:2000px;}
</style>
<script>
window.onload=function(){
document.getElementById("main").height = document.getElementById("content").offsetHeight;
};
</script>
</head>
<body>
<div id="main">
<div id="content"></div>
</div>
</body>
</html>
2014-04-03
试下#main加上
#main{display:inline-block;}
试试看把