ウィンドウの高さからコンテンツを開始

私はしばしばウェブページに表示されるデザインパターンを複製しようとしています。私のページのコンテンツは、ウィンドウの高さの後に開始したいと思います。
私は、画面上に縦横両方向にセンタリングされたリンクを持つヘッダを持っています。最初の段落がページに表示されないようにしています（表示するにはスクロールする必要があります。あなたはページの上に着く）。
コンテンツにmargin-top:100%を適用しようとしましたが、ヘッダーの高さが余白に追加されているため、ページの下部には遠すぎます。それを行う方法についてのウィンドウの高さからコンテンツを開始

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でこの

<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を使用してそれを行うことができますが、私は純粋な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

ウィンドウの高さからコンテンツを開始

答えて

関連する問題