【やりたいこと】
スマホ用サイトです。
画面を縦四つに分けて(上から、タイトル→メニュー→画像→フッター)、
画面の縦の割合を%で指定し、フッターは最下部に固定したいです。
(メニューの高さ20%、フッター10%、タイトル・画像は出来ればauto指定)
【問題点】
1、上の方に重なってしまい画像が見えなくなっている(タイトルは通常に表示中)
2、メニューの高さが低い(5%くらいに見える)
下記がコードになります。
どうぞよろしくお願い致します。
【html】 <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no"> <body> <div id="container"> <div id="contents"> <div id="menu"> </div> </div> <!--contents--> <div id="footer"> </div> </div> <!--container--> <body> 【css】 body { position:relative; height: 100%; } #container { height: auto; width: 100%; } #contents{ height: 100%; width: 100%; bottom: 0; } #menu{ position: absolute; height: 20%; width: 100%; } #footer{ position: fixed; height: 10%; bottom: 0; width: 100%; }
回答1件
あなたの回答
tips
プレビュー