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

时间:2014-11-24 08:30:24

标签: html css css-position

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

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

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

一方面有什么优势,还是可以互换使用?

3 个答案:

答案 0 :(得分:5)

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

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

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

答案 1 :(得分:4)

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

现在你的css为

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

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

但是当你申请时

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

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

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

答案 2 :(得分:1)

创建全屏div的另一种方法是将height: 100%;应用于bodyhtmldiv,然后将position:relative应用于完整屏幕div。如下例所示:

html,
body {
    height: 100%;
}

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

示例:http://jsfiddle.net/s04scj0m/1/