窗口高度後的內容開始

我試圖複製我經常在網頁上看到的設計模式。我希望我的頁面內容能夠在窗口全高後啓動。
我有一個鏈接的頭部，這些鏈接在屏幕上垂直和水平居中，我希望第一個段落不要顯示在頁面上（您應該滾動查看，您應該只在看到標題時你登陸頁面）。
我試圖將margin-top:100%應用於我的內容，但由於標題的高度已添加到頁邊距，因此頁面底部的距離太遠。
示意這將是這樣的窗口高度後的內容開始

<body> 
<!-- You can see this when you load the page --> 
<div id="header"> 
blablabla 
<a href="">Index</a> 
<a href="">Contact</a> 
<a href="">...</a> 
</div> 

<!-- You should scroll to see this --> 
<div id="content"> 
<p>...</p> 
</div> 
</body>

在javascript中，這將是這樣的：

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
var hheight = document.getElementById('header').offsetHeight; 
document.getElementById("content").style.marginTop = (height - hheight)+ "px";

如何做任何提示嗎？我經常在移動設計上看到這些模式，但我從未想過如何去做。我可以用javascript來做，但我認爲可能有一種方法可以用純CSS來做...

來源

2017-05-27 BJRINT

使用vh單位。 100vh是視口的高度。這裏有一個參考 - https://developer.mozilla.org/en-US/docs/Web/CSS/length

body { 
 
    margin: 0; 
 
} 
 
#header { 
 
    height: 100vh; 
 
    background: #eee; 
 
}

<body> 
 
<!-- You can see this when you load the page --> 
 
<div id="header"> 
 
blablabla 
 
<a href="">Index</a> 
 
<a href="">Contact</a> 
 
<a href="">...</a> 
 
</div> 
 

 
<!-- You should scroll to see this --> 
 
<div id="content"> 
 
<p>...</p> 
 
</div> 
 
</body>

來源

2017-05-27 15:51:22

窗口高度後的內容開始

回答

相關問題