製作一個DIV的全屏幕並且像位置相對一樣

Question

我想要一個div元素來填滿整個屏幕。所以我有以下項目：

<div style="background:black;position:absolute;top:0;left:0;right:0;bottom:0;"></div> 
<div>Hello</div> 
<div>World</div> 

我遇到的問題是，你好世界divs出現在全屏幕的頂部。我希望Hello World div在全屏div後出現，以便您必須滾動到它。

從本質上講，我想讓全屏div表現得像它的相對位置。我不想使用JavaScript來硬編碼Hello World div的起始位置。

有沒有簡單的方法來實現我只想用CSS？

感謝

Answer 1

爲了使第一<div>是全屏你只需要採取vh長度單位的優勢，而不是絕對定位：

/* Removing padding and margin from 
 
    the specified elements: */ 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    border-width: 0; 
 
} 
 
/* a <div> is already 100% wide, 
 
    so we specify only the height, 
 
    and ensure that any lengths 
 
    are calculated to include 
 
    border-width, padding and margin 
 
    using the box-sizing property: */ 
 
.fullpage { 
 
    height: 100vh; 
 
    box-sizing: border-box; 
 
} 
 
/* purely so that there is something 
 
    to see easily, irrelevant to the 
 
    demo: */ 
 
div:nth-child(odd) { 
 
    background-color: #f90; 
 
} 
 
div { 
 
    min-height: 2em; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="fullpage"></div> 
 
<div>Hello</div> 
 
<div>World</div>

JS Fiddle demo。

參考文獻：

• Viewport-relative length units。

Answer 2

檢查：

<div style="background:black; height:100vh;"></div> 
<div>Hello</div> 
<div>World</div> 

Answer 3

可以使用

height: 100vh; 
width: 100vw; 

不需要左右下角絕對頂部;