htmlとbodyにheight: 100%を設定する理由
ウェブページの全体の高さをビューポートの高さに合わせたい場合、htmlとbody要素にheight: 100%;を設定することがあります。これは、背景の大きさやページ内の特定のセクションをビューポートに合わせるデザインの要件を満たすためによく使用されます。
height: 100%の副作用
しかし、htmlとbodyにheight: 100%;を設定することで、overflow: hidden;が指定されたときにページのトップに自動的にスクロールされるという問題が発生することがあります。これは、多くのユーザーが予期しない動作となり、ページの利用性を低下させる可能性があります。
解決策
この問題を回避するためには、height: 100%;の代わりにmin-height: 100vh;を使用することをおすすめします。これにより、ページの最小の高さがビューポートの高さになり、上記の問題を回避しながらも同様のデザイン要件を満たすことができます。
まとめ
htmlとbodyにheight: 100%;を設定することは、特定の状況で問題を引き起こす可能性があるため、注意が必要です。ページのデザインや要件に応じて、適切なスタイルを適用することが重要です。