CSS全屏 - 绝对位置与100％高度

When creating a full screen div in html & css one has two main options:

在html&css中创建全屏div时,有两个主要选项:

Using: html, body, #myDiv {height: 100%, width: 100%}

使用:html,body,#myDiv {height:100%,width:100%}

Or: #myDiv{position: absolute; top:0px; bottom:0px; width: 100%}

或者:#myDiv {position:absolute;顶:0像素;底部:0像素;宽度:100%}

Is there any advantage of one over the other or can they just be used interchangeably?

一个优于另一个有什么优势,还是可以互换使用?

3 个解决方案

#1

Both produce the same effect i.e. have a full screen div. Now the only diff. is between the positioning attribute

两者都产生相同的效果,即具有全屏div。现在唯一的差异。在定位属性之间

Now when you have your css as

现在,当你有你的CSS

html, body, #myDiv {height: 100%, width: 100%}

then the default position attribute is static which means that it will normally flow into the webpage

然后默认位置属性是静态的,这意味着它通常会流入网页

But when you apply

但是当你申请时

     #myDiv{position: absolute; top:0px; bottom:0px; width: 100%}

It is slightly different than the previous one. With position as absolute it means that this div is relative to the immediate parent element or if there is no parent element then it is relative to the page itself. You can see the effect if you have another div as parent element and u insert some text or an image into #myDiv Also an element with absolute position is removed from the flow of elements on the page which means it will not affect other elements and other elements will not affect it

它与前一个略有不同。如果position是绝对值,则意味着此div与直接父元素相关,或者如果没有父元素,则它相对于页面本身。如果您有另一个div作为父元素,并且您将一些文本或图像插入到#myDiv中,您可以看到效果。还会从页面上的元素流中删除具有绝对位置的元素,这意味着它不会影响其他元素和其他元素元素不会影响它

You can check the jsfiddle link and see for yourself how the position of the text varies in both styles http://jsfiddle.net/sidarth1989/32szd39g/

您可以查看jsfiddle链接,自己查看文本的位置如何在两种样式中变化http://jsfiddle.net/sidarth1989/32szd39g/

#2

Viewport relative units are now pretty well supported... so you could do this:

Viewport相对单位现在得到很好的支持......所以你可以这样做:

#myDiv {
  height: 100vh;
  width: 100vw;
}

See here: https://www.w3.org/TR/css3-values/#viewport-relative-lengths

请参见:https://www.w3.org/TR/css3-values/#viewport-relative-lengths

#3

One more way to create a full screen div is to apply height: 100%; to body,html and div , then to apply position:relative to the full screen div. Like the following example:

创建全屏div的另一种方法是应用高度:100%;到body,html和div,然后应用position:相对于全屏div。如下例所示:

html,
body {
    height: 100%;
}

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

An example: http://jsfiddle.net/s04scj0m/1/

一个例子:http://jsfiddle.net/s04scj0m/1/

#1