css div高度设置

设置mainheight:100%;当页面下拉时main的高度没有铺满body,怎么处理使main的高度铺满bodycss如下求大神!!!... 设置main height:100%;当页面下拉时main的高度没有铺满body,怎么处理使main的高度铺满body

css如下

求大神!!!
展开
 我来答
百度网友faadf46
高粉答主

2019-07-23 · 说的都是干货,快来关注
知道答主
回答量:4556
采纳率:0%
帮助的人:70.5万
展开全部

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

滟丽00
高粉答主

2019-06-05 · 繁杂信息太多,你要学会辨别
知道答主
回答量:1487
采纳率:0%
帮助的人:23.4万
展开全部

1、首先创建或者打开我们的web项目,新建一个html文件和css文件即可。

2、html页面代码如图所示,定义一个div,给一个id属性即可。

3、这里是使用宽度的百分比之后,设置高度值为零,使用padding属性的top或者bottom的值(可以是任意百分比),背景颜色作为测试。

4、然后在浏览器运行之后的效果是这样的哦,放大缩小浏览器,宽高会随之改变。

5、这个方法是使用expression来设置高度即可。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
创业者李孟
高粉答主

推荐于2017-09-13 · 数码领域创作者
个人认证用户
创业者李孟
采纳数:7947 获赞数:39409

向TA提问 私信TA
展开全部

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样式,自然就是自适应高度了。

参考网址:http://www.divcss5.com/rumen/r613.shtml

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
澤希Dc
推荐于2017-09-27 · TA获得超过1747个赞
知道小有建树答主
回答量:509
采纳率:0%
帮助的人:250万
展开全部

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>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2014-04-03
展开全部

试下#main加上

#main{display:inline-block;}

试试看把

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式