窗口高度后的内容开始

我试图复制我经常在网页上看到的设计模式。我希望我的页面内容能够在窗口全高后启动。
我有一个链接的头部，这些链接在屏幕上垂直和水平居中，我希望第一个段落不要显示在页面上（您应该滚动查看，您应该只在看到标题时你登陆页面）。
我试图将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

窗口高度后的内容开始

回答

相关问题