首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 服务器 小程序 框架 手机APP

CSS3

热门: ASP.NET PHP编程 ASP编程 JSP编程

css 实现div高度自适应占满屏

来源:未知 发布时间:2019-05-22
如何使一个div在不同分辨率情况下都能全高度显示
 
第一步,在html,body设置height:100%
 
第二步,在要需要站满屏的div设置width:100%,height:100%
 
来看一个demo:
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
section{
width: 100%;
height: 100%;
background: skyblue;
border: 1px solid #eee;
}
</style>
<body>
<section>这是第1个div</section>
<section>这是第2个div</section>
<section>这是第3个div</section>
<section>这是第4个div</section>
<section>这是第5个div</section>
</body>
</html>
 

上一篇:手机站如何让详细图片自动适应

下一篇:没有了

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 服务器 | 小程序 | 框架 | 手机APP |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版