OWIEです。弊社で短納期のおまかせシンプルパックというサービスが始まりました（宣伝）。その短期プラン用の雛形を組んでいる時にふと気づいたんですが、
「いや、知ってるわそんなの」という人は回れ右でOK。
いつもはスマートデバイス対応するぞ〜というフェーズで流れ的に設定してるんですが、サイドにナビゲーションが配置されるデザインの場合、ブラウザの縦幅をシビアに考えないといけない事態に直面しました。
順当に行けばサイドナビゲーションに対してoverflow-y: auto;で良いんですが、特にオブジェクトが右に配置されてある場合はスクロールバーが二重になって見た目が良くないんですよね。
スクロールバーを装飾するのもいいですが、ブラウザ別の対応を考えると「はみ出さないように対策する」方がスマートでいいかなと思い至りました。
というわけでこの「@media screen and (max-height: 760px)」の設定でナビゲーション部分を調整すると…
いや、media screenなんで当たり前といえば当たり前だし、あまりそこまでバリバリ使うケースは少ないと思うんですが、知識としてストックしておいて損はないかなと。良かった良かった。
今回は以上です。では。
追伸：弊社のおまかせシンプルパック、ぜひ利用してみてくださいね。
