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的高度改变了 。
1、首先创建或者打开我们的web项目，新建一个html文件和css文件即可。
2、html页面代码如图所示，定义一个div，给一个id属性即可。
3、这里是使用宽度的百分比之后，设置高度值为零，使用padding属性的top或者bottom的值（可以是任意百分比），背景颜色作为测试。
4、然后在浏览器运行之后的效果是这样的哦，放大缩小浏览器，宽高会随之改变。
5、这个方法是使用expression来设置高度即可。
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}
content高度设100px时，如图：
main高度没铺满全页面
该怎么处理？？？求大神！！！
我明白了，你是有一个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>
|
广告 您可能关注的内容 |
