ウィンドウを縮めても「見える範囲が狭まる」ようにするには
Q&A
Closed
解決したいこと
1画面（いわば1枚の写真のような、スクロールできない画面）を
どんなディスプレイでも画面いっぱいに表示できるWebサイトを作ろうとしています。
そこで、以下のようにhtml/cssを用い、heightについてマークアップしてみたのですが、
この方法では、ウィンドウを垂直方向に縮めた際にレイアウトが崩れてしまいます。
理想は、ウィンドウを縮めても「見える範囲が狭まる」ようになることなのですが、
何か上手くいく方法はありませんでしょうか？
自分で試したこと
html
<body>
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</body>
css
html,body{
height:100%;
}
header{
height:10%;
}
main{
height:80%;
}
footer{
height:10%;
}
0
