[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック

フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装を必要としますが、IE9+対応でCSS一行で簡単に実装できるテクニックを紹介します。

[kagioo2uma]

うわぁ・・・恥ずかしながら知らなんだ

[s99e209]

なんと、各要素の高さはCSSだけで揃えることができるのか。 プラグインで実現しようとすると表示が遅延したりマシンに負荷がかかるので、CSSだけで出来るのは有り難い。

[mcddx30]

%使ってたけどIE8以下捨てるならvhなんてのも使えるのか。

[daikix]

こういう使い方だったのか・・・

[boyasan]

100vh

[pgmy]

スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック via @nuzzel thanks @colisscom

[wims_Tea]

これしらんかった(´・_・｀）

[youichirou]

いつの間にかそんな単位が…。

[monoooki]

リソースのリンク先読んだらvhの他にvw, vmin, vmaxなんてのもあった。

[Sips]

CSS

[k_ume75]

IE9+対応

[ultimate-ez]

vh指定、iOSで暴走しちゃって実装諦めたことがあるけど、もう一度向き合ってみるか。／[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック @colisscomさんから

[kuracom]

覚えておこう

[amebloger-x]

これは知らんかった、height:○○%;でいいんじゃね？とか思ったけど、heightだと親要素に影響受けるから、vh使うのが良さげ[css][デザイン]

[lenore]

“単位「vh」とは「viewport height」の略で、1vhはブラウザの高さの1%になります。”

[izgdhours]

単位「vh」がミソ

[yoshi-na]

vh知らなかった

[nors]

https://medium.com/@ckor/make-full-screen-sections-with-1-line-of-css-b82227c75cbd .section { height: 100vh; }

[qrac_jp]

単位「vh」を初めて知った！

[hedeyoshi]

単位「vh」がミソ

[dazed]

.section { height: 100vh; }

[pipehead]

> .section { height: 100vh; }