导航:首页 > 万维百科 > 网页满屏设计高度

网页满屏设计高度

发布时间:2020-11-22 23:33:19

1、dreamweaver中怎么设置div的高度正好是满屏啊?

设置DIV的高度为100%即可,将天南写的代码另存为html文件,然后运行测试: <html> <head> <style type="text/css"> body,html{height:100%;} #demo{height:100%;background:green;} </style> </head> <body> <div id="demo">这是测试盒子</div> </body> </html>

麻烦采纳,谢谢!

2、如何让网页自适应所有屏幕宽度

“自适应网页设计”到底是怎么做到的?其实并不难。

1.首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0
,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

2、不使用绝对宽度由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码
不能指定像素宽度:width:xxx px;
只能指定百分比宽度:
width: xx%;
或者
width:auto;
3、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
三、流动布局(fluid grid)
“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
另外,绝对定位(position: absolute)的使用,也要非常小心。
四、选择加载CSS
“自适应网页设计”的核心,就是CSS3引入的Media Query模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
五、CSS的@media规则
同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
六、图片的自适应(fluid image)
除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
});

3、如何使网页的div元素高度满屏

可以要配合JS

<html>
<body>

<script language="JavaScript">
function test(){
var  s = "";
s += " 网页可见区域宽:"+ document.body.clientWidth;
s += " 网页可见区域高:"+ document.body.clientHeight;
s += " 网页可见区域宽:"+ document.body.offsetWidth  +" (包括边线的宽)";
s += " 网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += " 网页正文全文宽:"+ document.body.scrollWidth;
s += " 网页正文全文高:"+ document.body.scrollHeight;
s += " 网页被卷去的高:"+ document.body.scrollTop;
s += " 网页被卷去的左:"+ document.body.scrollLeft;
s += " 网页正文部分上:"+ window.screenTop;
s += " 网页正文部分左:"+ window.screenLeft;
s += " 屏幕分辨率的高:"+ window.screen.height;
s += " 屏幕分辨率的宽:"+ window.screen.width;
s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
}
</script>

<a href="javascript:test()">点击我查看信息</a>
单纯的css 可以用100%,但是不能兼容

</body>
</html>

4、一个浏览器窗口的宽度和高度的px是多少?

这个并无固定值
浏览器窗口是随动的,比如显示器大小,窗口是否全屏等,但是可以通过JavaScript相关的代码来获取当前浏览器窗口的尺寸,具体可参考JavaScript的api文档

5、网页设计合适的页面尺寸是多少

网页设计选用的分辨率是72像素,使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计,一般采用全屏展示和两侧留白的方式。
全屏展示,是整个网站看起来大气一些,但是布局要合理安排,不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸,能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域,内容限时区域在好控制在1000px-1200px。

6、DIV高度怎么设置全屏?

DIV最外层全屏100%宽度

其实DIV全屏即宽度值设置为100%,如果对网页最外层的DIV盒子不设置宽度回,这样盒子依然是全屏相当于答100%宽度。

如果对DIV设置全屏,一般我们就设置其width宽度样式为100%。

这里为了方便理解,DIVCSS5实例讲解DIV全屏实现对最外层DIV给予id引入CSS命名为warp;同时为了便于观察,我们对div设置一个css背景为黑色,高度为80px。

完整html+css代码:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>div全屏实例</title>

<style>

#warp{ width:100%;height:80px;background:#000}

</style>

</head>

<body>

<div id="warp"></div>

</body>

</html>

7、如何使网页div元素高度满屏

大部分浏览器支持CSS3的高度新单位“VH”(屏幕高度),height: 100vh;就是屏幕高度的100%,也就是高度满屏。但是UCWeb等浏览器不支持该单位,实际使用要测试

height: 100vh;

8、怎么让一个页面高度占整个屏幕的

样式设置高度撑满整个页面,那么必须从最外层一层一层设置高度100%;代码如下:html,body,div{
height:100%}
这里默认div是第三层,如果要撑满全页面的话,那么外层必须也是高度100%;
下面举个例子:
<html>
<head>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;}
html,body,div{
height:100%
}
</style>
<body>
<div>高度全屏</div>
</body>
</html>

9、DIV高度怎么设置全屏?

要想对DIV设置全屏,一般设置其width宽度样式为100%,设置其width宽度样式为100%有两种方案,具体方案如下。

10、如图,页面是满屏的效果。如何设置第三个div的高度?

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<style>
html, body {margin:0; padding:0}
body {display: flex; flex-direction: column; width:100%; height:100%}
.flex {flex: 1 1 auto; box-sizing: border-box; border: 1px solid #000}
.h70 {flex: 1 0 70px}
.scroll {overflow:auto}
</style>
</head>
<body>
<div class="flex h70">导航,高70px</div>
<div class="flex"><p>条件筛选,高度不固定</p><p>第二行</p><p>第三行</p></div>
<div class="flex scroll">结果,剩余高度,自动滚动条<div style="height:1000px"></div>我是最后一行</div>
<div class="flex h70">底部,高70px</div>
</body>
</html>

与网页满屏设计高度相关的知识