Q&A
「bodyのpadding-bottomを70pxと取っていますが、うまく反映されません。」とのことですが、反映されていない状態では何になっているのですか？
使用フレームワークはdjnagoです。
フッターを常に最下部に固定したく、bootstrapでfixed-bottom、bodyのpadding-bottomを70pxと取っていますが、うまく反映されません。
なんどやってもうまくいかず、何日か悶々としています。
色々調べたのですが良い解決策が見つからず、、、。
どなたかお力お貸しいただけませんか。
base.html
1<!doctype html> 2{% load bootstrap4 %} 3{% bootstrap_css %} 4{% bootstrap_javascript %} 5{% load static %} 6<html lang="ja"> 7<head> 8 <link rel="stylesheet" href="{% static 'css/neumorphism.css' %}"> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10<!-- Primary Meta Tags --> 11<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 12<meta name="title" content="Neumorphism UI - About us"> 13<meta name="author" content="Themesberg"> 14 15<link rel="canonical" href="https://themesberg.com/product/ui-kits/neumorphism-ui/" /> 16 17<!-- Social tags --> 18<meta name="keywords" content="neumorphism, neumorphism ui, neomorphism, neomorphism ui, neomorphism css, neumorphism css, neumorph, neumorphic, design system, login, form, table, tables, card, cards, navbar, modal, icons, icons, map, chat, carousel, menu, datepicker, gallery, slider, date, social, dropdown, search, tab, nav, footer, date picker, forms, tabs, time, button, select, input, timeline, cart, about us, account, log in, blog, profile, portfolio, landing page, ecommerce, shop, landing, register, app, contact, one page, sign up, signup, store, bootstrap 4, bootstrap4, dashboard, bootstrap 4 dashboard, bootstrap 4 design, bootstrap 4 system, bootstrap 4, bootstrap 4 uit kit, bootstrap 4 kit, themesberg, html kit, html css template, web template, bootstrap, bootstrap 4, css3 template, frontend, responsive bootstrap template, bootstrap ui kit, responsive ui kit"> 19<meta name="description" content="Start developing neumorphic web applications and pages using Neumorphism UI. It features over 100 individual components and 5 example pages."> 20 21<!-- Schema.org markup for Google+ --> 22<meta itemprop="name" content="Neumorphism UI by Themesberg"> 23<meta itemprop="description" content="Start developing neumorphic web applications and pages using Neumorphism UI. It features over 100 individual components and 5 example pages."> 24<meta itemprop="image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui/neumorphism-thumbnail.jpg"> 25 26<!-- Twitter Card data --> 27<meta name="twitter:card" content="product"> 28<meta name="twitter:site" content="@themesberg"> 29<meta name="twitter:title" content="Neumorphism UI by Themesberg"> 30<meta name="twitter:description" content="Start developing neumorphic web applications and pages using Neumorphism UI. It features over 100 individual components and 5 example pages."> 31<meta name="twitter:creator" content="@themesberg"> 32<meta name="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui/neumorphism-thumbnail.jpg"> 33 34<!-- Open Graph data --> 35<meta property="fb:app_id" content="214738555737136"> 36<meta property="og:title" content="Neumorphism UI by Themesberg" /> 37<meta property="og:type" content="article" /> 38<meta property="og:url" content="https://demo.themesberg.com/neumorphism-ui/" /> 39<meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui/neumorphism-thumbnail.jpg"/> 40<meta property="og:description" content="Start developing neumorphic web applications and pages using Neumorphism UI. It features over 100 individual components and 5 example pages." /> 41<meta property="og:site_name" content="Themesberg" /> 42 43<!-- Favicon --> 44<link rel="apple-touch-icon" sizes="120x120" href="../../static/assets/img/favicon/apple-touch-icon.png"> 45<link rel="icon" type="image/png" sizes="32x32" href="../../static/assets/img/favicon/favicon-32x32.png"> 46<link rel="icon" type="image/png" sizes="16x16" href="../../static/assets/img/favicon/favicon-16x16.png"> 47<link rel="manifest" href="../../static/assets/img/favicon/site.webmanifest"> 48<link rel="mask-icon" href="../../static/assets/img/favicon/safari-pinned-tab.svg" color="#ffffff"> 49<meta name="msapplication-TileColor" content="#ffffff"> 50<meta name="theme-color" content="#ffffff"> 51 52<!-- Fontawesome --> 53<link type="text/css" href="../../static/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"> 54 55<!-- Pixel CSS --> 56<link type="text/css" href="../../static/css/neumorphism.css" rel="stylesheet"> 57 58<!-- NOTICE: You can use the _analytics.html partial to include production code specific code & trackers --> 59 </head> 60 <body style="padding-bottom:70px;"> 61 <main> 62 {% block content %} 63 <!-継承してコンテンツを入れる(仮) -> 64 {% endblock %} 65 </main> 66 <footer> 67 {% block footer %} 68 69 {% endblock %} 70 </footer> 71 72 <!-- Core --> 73<script src="../../static/vendor/jquery/dist/jquery.min.js"></script> 74<script src="../../static/vendor/popper.js/dist/umd/popper.min.js"></script> 75<script src="../../static/vendor/bootstrap/dist/js/bootstrap.min.js"></script> 76<script src="../../static/vendor/headroom.js/dist/headroom.min.js"></script> 77 78<!-- Vendor JS --> 79<script src="../../static/vendor/onscreen/dist/on-screen.umd.min.js"></script> 80<script src="../../static/vendor/nouislider/distribute/nouislider.min.js"></script> 81<script src="../../static/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script> 82<script src="../../static/vendor/waypoints/lib/jquery.waypoints.min.js"></script> 83<script src="../../static/vendor/jarallax/dist/jarallax.min.js"></script> 84<script src="../../static/vendor/jquery.counterup/jquery.counterup.min.js"></script> 85<script src="../../static/vendor/jquery-countdown/dist/jquery.countdown.min.js"></script> 86<script src="../../static/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script> 87<script src="../../static/vendor/prismjs/prism.js"></script> 88 89<script async defer src="https://buttons.github.io/buttons.js"></script> 90 91<!-- Neumorphism JS --> 92<script src="../../static/o 93assets/js/neumorphism.js"></script> 94 </body> 95</html>
dertail.html
1{% extends "base.html" %} 2 3{% block content %} 4~~ 5{% endblock %} 6 7 8{% block footer %} 9<div class="row fixed-bottom"> 10 <div class="col"> 11 <!-- Nav Wrapper --> 12 <div class="nav-wrapper position-relative"> 13 <div class="nav nav-pills nav-pill-circle d-flex justify-content-around"> 14 <div class="nav-item"> 15 <a class="nav-link active" aria-label="first navigation tab" data-toggle="tab" href="{% url 'users:home' %}" > 16 <span class="nav-link-icon d-block"><span class="far fa-user"></span></span> 17 </a> 18 </div> 19 <div class="nav-item"> 20 <a class="nav-link" aria-label="second navigation tab" data-toggle="tab" href="#"> 21 <span class="nav-link-icon d-block"><span class="far fa-comments"></span></span> 22 </a> 23 </div> 24 <div class="nav-item"> 25 <a class="nav-link" aria-label="third navigation tab" data-toggle="tab" href="{% url 'users:detail' user.pk %}"> 26 <span class="nav-link-icon d-block"><span class="far fa-sun"></span></span> 27 </a> 28 </div> 29 </div> 30 </div> 31 <!-- End of Nav Wrapper --> 32 </div> 33</div> 34{% endblock %}
また、「フッターが重なってしまう」とのことですが、何と重なっているのですか？
ご連絡いただきありがとうございます。
「bodyのpadding-bottomを70pxと取っていますが、うまく反映されません。」とのことですが、反映されていない状態では何になっているのですか？
また、「フッターが重なってしまう」とのことですが、何と重なっているのですか？
→
画像の通りです。わかりずらいのですが、フッターに透明のボタンが重なっているのが見えるかと思います。
fixed-bottom であれば重なって当然のものに重なっているように見えるのですが……
問題の箇所が認識できません。もう少し具体的にお願いできますか？
もしかして、「bodyのpadding-bottomを70pxと取っているのに、下までスクロールした時にフッターがパディング領域に重ならない」ということであれば、下までスクロールしたスクリーンショットがあるとわかりやすいかもしれません。
あ、違うのかな？
もしかして、透明ボタンはフッターではなくて、「プロフィール編集」などと書いてあるものがフッターなのですか？
まず、フッターとはどれのことか、ということをお示しいただくのが早いかもしれません。
素早いご返信ありがとうございます。
本当に詰まっているためご連絡心から助かります。
透明ボタンがフッターの認識でお間違いありません。
fixed-bottomが問題なのでしょうか。。。？
cssは外部テンプレートを用いているためあまり触りたくなく、bootstrapのみでフッターを記述しようとしています。
なんども質問ありがとうございます。
もしかして、fixed-bottom の意味をご理解されずに使っているのですか？
これは画面の下部に固定して、スクロールしても動かないようにするものですが、ご想定のものと異なりますか？
これは画面の下部に固定して、スクロールしても動かないようにするものですが、ご想定のものと異なりますか？
→
まさにご指摘の通りで、常に画面最下部にこの透明の3つのボタンを常駐させたく思っています。
しかし画面内コンテンツと被ってしまう、という状況です。
コンテンツにかぶらずに画面内に常駐させる、となると、どうしたいのかイメージできません。
完成イメージなどがあればわかりやすいかもしれませんね。
伝わりづらくすみません。
twitterのように、常に最下部にボタンがあるイメージです。
https://imgur.com/a/qAERe6k
これもかぶっていますよ。スクロールすると、フッターの下からコンテンツエリアが出てくるのがわかると思います。
もしかして、フッターに背景色をつけたい、ということですか？
twitterのようなものを再現したく思っていました。
これもかぶっていますよ。スクロールすると、フッターの下からコンテンツエリアが出てくるのがわかると思います。
→
こちら、被ってるんですね。。。！
色をつけたい、というよりこのTwitterのフッターを再現したかったです。
この場合、透けるのを防ぐためにz-indexとか弄る感じでしょうか。。？
-millmill-さんのご回答のとおりです。
ありがとうございます！反映したものを写真更新しました。
透明になってしまい背景が透けてしまうのは変えられるんでしょうか・・・？
どのようなコードの結果ですか？
style に opacity: 1; を追加してみてはどうでしょう?
<div class="row fixed-bottom" style="opacity:1.0; border-top:1px solid rgba(0,0,0,0.2);">
ご回答いただきありがとうございます！
このようなコードです。
やはり透けてしまっています。
background-colorが抜けていませんか？
ご連絡ありがとうございます！
現状の画面更新しました。
コードは
<div class="row fixed-bottom" style="opacity:1.0; background-color:#000000 border-top:1px solid rgba(0,0,0,0.2);">
でして、background-colorをいろいろ変えてみても色が変わらない、という状態です。そのため、そもそもopacityやbackground-colorが既存のcssの方を読まれてしまって上書きできていないのが原因だと予想しています。
何度もすみません、本当に助かっています。
https://tonari-it.com/css-cascading/
上書きについて調べてみたのですが、syyleに直接記述しているこちらの方が優先順位高いはずですよね...
!important;
を使ってみたのですがうまくいかず。。。
おさわがせしました。
うまくいきました。。。。！！！！
ぜひベストアンサーにさせていただきたいので、何か投稿していただけませんでしょうか？
-millmill-さんがご回答されていると思いますが。
回答1件
0
ベストアンサー
フッターにbodyと同じ色を
フッターとの境が少しわかる程度のborder
をかければよいかと思います^^
html
1<div class="row fixed-bottom" style="backgrand-color:#○○○; border-top:1px solid rgba(0,0,0,0.2);">
投稿2020/07/03 03:35
総合スコア674
あなたの回答
tips
プレビュー
