制作当前屏幕的全屏
我有五个部分:
<section id="one">Page 1</section>
<section id="two">Page 2</section>
<section id="three">Page 3</section>
<section id="four">Page 4</section>
<section id="five">Page 5</section>
我想让他们每个人全屏当前屏幕(我有屏幕1920/1080其他有1024/768等)
我有这样的css代码:
section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}
当我从2000px到100%的高度时,结果是:
任何想法我怎么能解决这个问题？
编辑
我找到了很好的文章.如果有人需要它,请看这里
SW4*_*SW4 10
您需要隐式将document(body)的尺寸设置为viewport(html)的尺寸,然后为每个部分指定100%的高度和宽度 - 然后相对于此计算.
更改您的CSS body以及section:
演示小提琴
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
padding: 60px;
padding-left: 120px;
box-sizing:border-box;
}
通过添加box-sizing:border-box;到CSS section,每个部分将保持100%的宽度,包括应用的填充.
注意
您还可以使用视口百分比单位,即使用vh和vw(视口高度)和(视口宽度)单位,以使内容伸展以填充视口的比例量,其中100 = 100%.这可能是隐式%单位的首选解决方案,具体取决于您所需的浏览器支持,并且不需要将元素嵌套在具有显式高度/宽度设置的父级中
只需使用：
section {
height:100vh;
width: 100vw;
}
无需为和标签设置height和width属性。<body><html>