JSFiddle Demo

Question

我有五个部分：

<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％时，结果是： enter image description here

任何想法如何解决这个问题？

JSFIDDLE

修改

我发现了很好的文章。 see here if anyone will need it

Answer 1

您需要将文档的尺寸（body）隐式设置为视口（html）的尺寸，然后为每个部分指定高度和宽度100％ - 然后计算相对于此。

将body和section的CSS更改为：

Demo Fiddle

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;添加到section的CSS中，每个部分将保持100％的宽度，包括应用的填充。

注意

您还可以viewport percentage units，即使用vh和vw（视口高度）和（视口宽度）单位，以使内容拉伸以填充视口的比例量，其中100 = 100％。这可能是隐式％单位depending on your required browser support的首选解决方案，并且不需要将元素嵌套在具有显式高度/宽度设置的父级中

Answer 2

只需使用：

section {
    height:100vh;
    width: 100vw;
}

无需为height和width代码设置<body>和<html>属性。

Answer 3

将body和html元素的高度设置为100％，然后在部分上使用height：100％。

html, body {
    height:100%;
}

<强> jsFiddle example

Answer 4

您需要将文档的高度设置为浏览器视口的大小，然后才能为其子项设置高度百分比：

body, html {
    margin: 0;
    height:100%
}

然后，只需将这些部分的高度设为100％：

section {
    display: block;
    background: #CFF;
    height:100%;
    padding: 60px;
    padding-left: 120px;
}

JSFiddle Demo

Answer 5

这并不难做到。

您需要做的是给body和html一个高度。我更改了以下CSS：

html {
        height: 100%;
        position: relative;
    }

    body {
        margin: 0;
        height: 100%;
        position: relative;
    }

    section {
        display: block;
        background: #CFF;
        height:100%;
        padding: 60px;
        padding-left: 120px;
    }

您可以在以下jsfiddle

中查看其工作原理

制作当前屏幕的全屏

5 个答案:

Demo Fiddle

注意

JSFiddle Demo