css控制div的高度与浏览器的高度相适应

使div的高度像width100%一样撑满整个浏览器的高度如何实现。。。... 使div的高度像width 100%一样撑满整个浏览器的高度 如何实现。。。 展开
 我来答
小媛9OF
2019-10-30 · TA获得超过1.1万个赞
知道答主
回答量:193
采纳率:0%
帮助的人:4.6万
展开全部

一、首先创建或打开我们的web项目并创建一个新的html文件和css文

二、HTML页面代码如图所示。定义一个div并给出一个id属性。

三、使用宽度百分比后,将高度值设置为零,使用padding属性的top或者bottom(可以使用任何百分比),并使用背景色作为测试。

四、浏览器运行后,效果如下。如果放大或缩小,宽度和高度将相应更改。

五、此方法是使用表达式设置高度。

轻烟谈生活
高粉答主

2019-07-11 · 轻烟和你聊聊生活中的有趣事
轻烟谈生活
采纳数:7 获赞数:116641

向TA提问 私信TA
展开全部

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

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

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

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

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

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
爬山虎恨风
推荐于2017-11-28
知道答主
回答量:30
采纳率:0%
帮助的人:12.6万
展开全部
高度的话 用css就不行了 用JavaScript先取得浏览器高度 然后设置一下
<script language="javascript">
var ss;
window.onload=function()
{
var w=document.documentElement.clientWidth ;//可见区域宽度
var h=document.documentElement.clientHeight;//可见区域高度
ss=document.getElementById('ha');
//alert(w);
ss.style.width=w+"px";
ss.style.height=h+"px";
}
<div id="ha" style="border:1px solid #000000;"></div>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
schl100861
2011-01-21 · TA获得超过374个赞
知道答主
回答量:118
采纳率:0%
帮助的人:63.5万
展开全部
一般这种情况是没办法实现的,
因为每个不同分辨率显示不一样,而且如果高度定成100%,
在不用分辨率中的显示页面上的东西肯定变形,或者撑不满,
我建议你没必要非得把高度定成跟浏览器一样的高度,希望我的答案您满意。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2011-01-22
展开全部
这种效果叫做遮罩,你可以百度一下,我贴个简单的给你:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<input type="button" onclick="pop()" value="弹出遮罩层" />
<input type="text" value="输入框" />
cccccccccccccccc
aaaaaaaaaaaa
bbbbbbbbbbbbbbbb
<script type="text/javascript">
<!--
function pop(){
var h=document.documentElement.clientHeight;
var w=document.documentElement.clientWidth;
var div=document.createElement("<div style='position:absolute;visibility:visible;border:1px solid #00f;z-index:2;left:0;top:0;width:"+w+"px;height:"+h+"px;'></div>");
div.appendChild(document.createTextNode("xxxxxxxxxxxxxxxxxxxx"));
document.body.appendChild(div);
}
//-->
</script>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式