Q&A
フッターを画面の一番下に固定したいのですがなかなかうまくいきません。
css
1html, body { 2 margin: 0; 3 width: 100%; 4 height: 98%;; 5} 6 7.container { 8 position: relative; 9 width: 100%; 10 height: auto !important; 11 height: 100%; 12 min-height: 100%; 13} 14 15main { 16 height: auto; 17} 18 19header { 20 line-height: 100px; 21 width: 85%; 22 margin: 4vh auto 0; 23 height: 12vh; 24 background-color: #666; 25 position: relative; 26 text-align: center; 27 color: white; 28 font-size: 35px; 29 padding-left: 80px; 30} 31 32footer{ 33 width: 100%; 34 height: 7vh; 35 background-color: #999; 36 position: absolute; 37 color: white; 38 bottom:0; 39}
jsp
1 2<body> 3 <div class="container"> 4 <%@include file="/header.jsp"%> 5 <main></main> 6 <%@include file="/fotter.jsp"%> 7 </div> 8</body> 9
色々と調整してみたのですが、フッターでコンテンツが隠れてしまったり
bottom:0;を外すと隠れないのですが、次はコンテンツ量が少ない時にフッターが上の方に行ってしまったりします。
どうにかコンテンツ量に左右されず、フッターを画面の一番下に固定する方法はないでしょうか
回答1件
0
ベストアンサー
containerにpadding-bottom: 7vh;を設定すれば固定されたまま中身にかぶらないと思いますがいかがでしょうか。
投稿2021/08/30 02:42
総合スコア312
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。