Q&A
『スクロールしても固定で表示するのではなく』とのことですが、スクロールするページの場合は、一番下までスクロールしないと見えないような感じでいいですか？
実現したいこと
登録ボタンの上にfooterの要素が被ってしまっているのを治したい
前提
スクロールしても固定で表示するのではなく、
footer以外の要素が少ない時にはfooterを最下部に表示し、
他の要素と被らないようにしたい
該当のソースコード
erb
1<footer id="footer"> 2 <div class="footer_content"> 3 <div class="footer_container"> 4 <div class="footer_logo"> 5 <%= image_tag asset_path('footer_logo.png'), class: 'footer_club_logo' %> 6 </div> 7 <div> 8 <div class="footer_items"> 9 <%= link_to '利用規約', 'https://1drv.ms/b/s!AuIts1feOLcPgc0zNz2W8xw0i0SqVA?e=LocU6c', class: 'terms_of_service' %> 10 </div> 11 <div class="footer_items"> 12 <%= link_to 'サービス', 'https://1drv.ms/b/s!AuIts1feOLcPgc0zNz2W8xw0i0SqVA?e=LocU6c', class: 'terms_of_service' %> 13 </div> 14 </div> 15 </div> 16 </div> 17 <div class="footer_copy"> 18 © 2023 Club Anchor by Comrade Co, Ltd. false 19 </div> 20</footer>
css
1#footer { 2 background-color: #4d4d4d; 3 border-radius: 12px; 4 position: fixed; 5 bottom: 0; /* 画面下部に固定 */ 6 width: 100%; 7 z-index: 100; 8} 9 10.footer_container { 11 display: flex; 12 align-items: center; 13 justify-content: center; 14 gap: 42px; 15 margin-bottom: 100px; 16} 17 18.footer_club_logo { 19 width: 120px; 20} 21 22.footer_items { 23 font-size: 12px; 24 color: #fff; 25 text-align: center; 26 padding: 8px 0; 27} 28 29.terms_of_service { 30 text-decoration: none; 31 color: #fff; 32} 33 34.footer_copy { 35 text-align: center; 36 color: #fff; 37 padding-bottom: 12px; 38 font-size: 12px; 39} 40
このように現状なっており、
教えていただけますと幸いです。
よろしくお願い致します！
回答1件
0
ベストアンサー
たとえば、bodyのmin-heightを設定して、グリッドレイアウトを使ってこんな感じとかどうでしょうか。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.0/destyle.min.css"> 8 <title>Document</title> 9 <style> 10 body { 11 min-height: 100vh; 12 display: grid; 13 grid: max-content 1fr max-content / auto-flow; 14 } 15 </style> 16</head> 17 18<body> 19 <header>header<br>header</header> 20 <main> 21 main 22 <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> --> 23 </main> 24 <footer>footer<br>footer</footer> 25</body> 26 27</html>
投稿2023/09/22 08:35
総合スコア37421
ご回答ありがとうございます！
理想の形になりましたが、一点mainの要素が少ない場合が崩れてしまっておりまして、
こちら追加で質問してご回答いただけますと幸いです。
また、別の質問で投稿いたします。
あなたの回答
tips
プレビュー
