Q&A
Bootstrapに独自のcssを追加してサイト構築しています。（フレームワークはLaravelを使用）
管理画面で、サイドメニューの背景色がフッターまでつけたいのですができずに困っております。
アドバイスいただけますと幸いです。
コード
html部分
<html lang="ja"> <head> ★省略 </head> <body> <div id="wrapper"> <header class=""> ★省略 </header> <div class="row adminbody"> <div class="clearfix"></div> <div class="col-md-2" id="sidebar"> <div class="sidebar-contents"> <ul class="nav-sidebar"> <li class="active" ><a href="">会員一覧</a></li> <li ><a href="">Cats一覧</a></li> <li ><a href="">Photo一覧</a></li> </ul> </div> </div> <div class="col-md-9 mt-5 ml-2"> <h1>会員一覧</h1> <table class="table table-striped mt-5"> ★省略 </table> </div> </div> <!-- footer --> <footer class="text-center border-top pt-3 pb-3 small"> © All rights reserved by cats-clover. </footer> ★bootstrapのscript省略 </div> </body> </html>
css部分
body { color: #4b4b4b; overflow-x: hidden; /*横スクロールバーを消す*/ } #sidebar { padding: 0; } #sidebar ul{ /*width: 100%; */ margin: 0; padding: 0; } #sidebar li{ list-style: none; margin-left: 10px; /*width: 100%;*/ background-color: #91cd79; } #sidebar ul li a{ display: block; padding: 10px 16px; color: #fff; text-decoration: none; transition: background-color .2s linear; } #sidebar ul li.active a { background-color: #ADD99B; } #sidebar ul li a:hover { background-color: #ADD99B; } footer { background-color: #d4e5ce; height: 50px; width: 100%; position: absolute;/*←絶対位置*/ bottom: 0; } #wrapper { min-height: 100vh; position: relative;/*←相対位置*/ padding-bottom: 50px;/*←footerの高さ*/ box-sizing: border-box;/*←全て含めてmin-height:100vhに*/ }
試したこと①
https://junonet.biz/web-design/css%E3%81%A7%E3%82%B5%E3%82%A4%E3%83%89%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E6%8F%83%E3%81%88%E3%82%8B%E6%96%B9%E6%B3%95/
のサイトを参考に、cssに以下を追加しました。
.adminbody { overflow:hidden; } #sidebar { padding: 0; /*サイドバー下まで*/ padding-bottom: 10000px; margin-bottom: -10000px; }
###試したこと②
http://blog.livedoor.jp/unimmy84/archives/679929.html
を参考にしました。
css
body { color: #4b4b4b; overflow-x: hidden; /*横スクロールバーを消す*/ /*サイドバーしたまで*/ min-height: 100%; height: auto !important; height: 100%; } #sidebar { padding: 0; /*サイドバー下まで*/ position : absolute ; left : 0 ; width : 230px ; min-height: 100%; height: auto !important; height: 100%; }
・・・結果はこちらで失敗・・・
アドバイスいただけますと幸いです…
回答1件
0
ベストアンサー
サイドバーということはおそらくスクロールされないこと前提だと思いますので、絶対配置を使用した方がよろしいかと思います。スクロールされてもいい場合はposition:absoluteを代わりに使用してください。ml-2を消してoffset-2を追加することで会場一覧が右に寄ります。また、#sidebarにheight:100%を追加することで下まで伸びます。
html
1<div class="col-md-9 mt-5 offset-2"> /* 変更 */ 2 <h1>会員一覧</h1> 3 <table class="table table-striped mt-5"> 4 </table> 5</div>
css
1#sidebar { 2 padding: 0; 3 /* 以下追加 */ 4 position: fixed; 5 height: 100%; 6 background-color: #91cd79; 7}
投稿2020/03/14 16:47
編集2020/03/14 16:54
総合スコア757
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/16 09:26