CSS中如何设置DIV自动满屏幕？
已知3个DIV<divclass="head"></div><divclass="main"><divclass="left"></div><divclass="righ...
已知3个DIV
<div class="head"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
head是网页上方满宽度，高度60PX
main中的left是head下方左边内容，宽度200PX，高度不定。
main中的right是head下方右边的内容，自动填满剩余的宽度和高度。
请问CSS如何编写？ 展开
<div class="head"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
head是网页上方满宽度，高度60PX
main中的left是head下方左边内容，宽度200PX，高度不定。
main中的right是head下方右边的内容，自动填满剩余的宽度和高度。
请问CSS如何编写？ 展开
7个回答
展开全部
right是无法只适应填满剩余的高度和宽度的，必须设定right的高度，让right的高度大于left的的高度。
<style>
#main{
width:100%;
height:60px;
float:left;
background:#0F0;
}
#left{
height:50px;
width:200px;
background:#90F;
float:left;
}
#right{
width:100%;
background:#FF0;
height:200px;
}
</style>
</head>
<body>
<div id="main"></div>
<div id="left">222222222222</div>
<div id="right">11111111111111</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var winWidth=0;
var winHeight=0;
//获取窗口宽度
if (window.innerWidth){
winWidth = window.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth;
}
//获取窗口高度
if (window.innerHeight){
winHeight = window.innerHeight;
}else if((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口高度
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
winWidth = document.documentElement.clientWidth;
winHeight = document.documentElement.clientHeight;
}
$("#div1).css({"height":parseInt(winHeight),"width":parseInt(winWidth)});
var winHeight=0;
//获取窗口宽度
if (window.innerWidth){
winWidth = window.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth;
}
//获取窗口高度
if (window.innerHeight){
winHeight = window.innerHeight;
}else if((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口高度
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
winWidth = document.documentElement.clientWidth;
winHeight = document.documentElement.clientHeight;
}
$("#div1).css({"height":parseInt(winHeight),"width":parseInt(winWidth)});
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="head" style = "width:auto;height:60px;"></div>
<div class="main" style = "width:auto;height:auto">
<div class="left" style = "width:200px;height:auto"></div>
<div class="right" style = "width:auto;height:auto"></div>
</div>
这么写行么？
<div class="main" style = "width:auto;height:auto">
<div class="left" style = "width:200px;height:auto"></div>
<div class="right" style = "width:auto;height:auto"></div>
</div>
这么写行么？
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你说的应该是框架，一般用于网站后台。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="file:///D|/WMAP/wamp/www/UntitledFrame-2" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="file:///D|/WMAP/wamp/www/UntitledFrame-3" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="file:///D|/WMAP/wamp/www/Untitled-2" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
width：100%；height：100%。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
