on:2014年11月10日sponsorsフルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。90%だと通常はスクリプトでの実装を必要としますが、IE9+対応でCSS一行で簡単に実装できるテクニックを紹介します。CSS次のセクションが見えるのは、こんな感じです。Exposureこのサイトではスクリプトでヘッダセクションの高さを90%に設定しています。Frickrではセクションの高さを100%にセットしています。Flickrこういったサイトの多くはレイアウトを達成するために、スクリプトを使用していますが、たった一行のスタイルシートで実現することが可能です。CSSこのデモページではヘッダセクションを90%の高さに、残りのセクションを100%の高さにスタイルシートで設定しています。高さを設定するスタイルシート高さを設定するのは、たった一行のスタイルシートです。height」の略で、1vhはブラウザの高さの1%になります。100%にしたい時は「100vh」、90%にしたい時は「90vh」を指定すればOKです。IEは9+で利用できます。Posts関連記事が見つかりませんでした。