前提・実現したいこと
bootstrap4でcontainer-fluidでサイドバースライドメニューの中でのfooter固定(コンテンツ少ない場合は、下固定、多い場合はなりゆき)を実現したいと考えています。
下記のコードの中でwrapperより下にfooterを記入した場合は実現できるのですが、スライドメニューをスライドさせると、一緒に動かず、wrapper内にfooterをいれたいと思っています。
発生している問題・エラーメッセージ
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title> 6 Pages </title> 7 <link rel="stylesheet" href="/css/reset.css"/> 8 <link href="/css/bootstrap.min.css" rel="stylesheet"> 9 <link href="/css/simple-sidebar.css" rel="stylesheet"> 10 <link rel="stylesheet" href="/css/common.css"/> 11 </head> 12<body> 13 <div id="wrapper"> 14 15 <!-- Sidebar --> 16<div id="sidebar-wrapper"> 17 <ul class="sidebar-nav"> 18 <li class="sidebar-brand"> 19 <a href="#"> 20 メニュー 21 </a> 22 </li> 23 <li> 24 <a href="#">ホーム</a> 25 </li> 26 <li> 27 <a href="#">ホーム</a> 28 </li> 29 <li> 30 <a href="#">ホーム</a> 31 </li> 32 <li> 33 <a href="#" class="btn btn-secondary menu-toggle">閉じる</a> 34 </li> 35 </ul> 36</div> 37<!-- /#sidebar-wrapper --> 38<!-- Page Content --> 39<div id="page-content-wrapper"> 40 <div class="container-fluid"> 41 <header> 42 </header> 43 44 45 46 <div class="row"> 47 <div class="col-sm-4"> 48 <a href="#menu-toggle" class="btn btn-secondary menu-toggle">Toggle Menu</a> 49 <button class="btn btn-secondary menu-toggle">あああ</button> 50 </div> 51 <div class="col-sm-4"> 52 </div> 53 <div class="col-sm-4"> 54 </div> 55 </div> 56 <p> 57 a<br />コンテンツを適当に多くする。 58 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 59 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 60 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 61 62 </p> 63 <!-- <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a> --> 64 65 </div> 66 </div> 67 <!-- /#page-content-wrapper --> 68 <footer> 69 <p> 70 <small>ここがフッター</small> 71 </p> 72</footer> 73 </div> 74 <!-- /#wrapper --> 75 76<!-- Bootstrap core JavaScript --> 77<script src="/js/jquery.min.js"></script> 78<script src="/js/bootstrap.bundle.min.js"></script> 79 80<!-- Menu Toggle Script --> 81<script> 82$(".menu-toggle").click(function(e) { 83 e.preventDefault(); 84 $("#wrapper").toggleClass("toggled"); 85}); 86</script> 87</body> 88</html> 89
CSS
CSS
1/*! 2 * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar) 3 * Copyright 2013-2017 Start Bootstrap 4 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE) 5 */ 6 7body { 8 overflow-x: hidden; 9} 10 11#wrapper { 12 padding-left: 0; 13 -webkit-transition: all 0.5s ease; 14 -moz-transition: all 0.5s ease; 15 -o-transition: all 0.5s ease; 16 transition: all 0.5s ease; 17} 18 19#wrapper.toggled { 20 padding-left: 250px; 21} 22 23#sidebar-wrapper { 24 z-index: 1000; 25 position: fixed; 26 left: 250px; 27 width: 0; 28 height: 100%; 29 margin-left: -250px; 30 overflow-y: auto; 31 border-top: 10px solid rgb(22, 131, 156); 32 /* border-right: 5px solid rgb(22, 131, 156); */ 33 background: #333; 34 -webkit-transition: all 0.5s ease; 35 -moz-transition: all 0.5s ease; 36 -o-transition: all 0.5s ease; 37 transition: all 0.5s ease; 38} 39 40#wrapper.toggled #sidebar-wrapper { 41 width: 250px; 42} 43 44#page-content-wrapper { 45 width: 100%; 46 position: absolute; 47} 48 49#wrapper.toggled #page-content-wrapper { 50 position: absolute; 51 margin-right: -250px; 52} 53 54 55/* Sidebar Styles */ 56 57.sidebar-nav { 58 position: absolute; 59 top: 0; 60 width: 250px; 61 margin: 0; 62 padding: 0; 63 list-style: none; 64} 65 66.sidebar-nav li { 67 text-indent: 20px; 68 line-height: 40px; 69 border-top: 1px solid #666; 70 border-bottom: 1px solid #444; 71} 72 73.sidebar-nav li a { 74 display: block; 75 text-decoration: none; 76 color: #999999; 77} 78 79.sidebar-nav li a:hover { 80 text-decoration: none; 81 color: #fff; 82 background: rgba(255, 255, 255, 0.2); 83} 84 85.sidebar-nav li a:active, .sidebar-nav li a:focus { 86 text-decoration: none; 87} 88 89.sidebar-nav>.sidebar-brand { 90 height: 65px; 91 font-size: 18px; 92 line-height: 60px; 93} 94 95.sidebar-nav>.sidebar-brand a { 96 color: #999999; 97} 98 99.sidebar-nav>.sidebar-brand a:hover { 100 color: #fff; 101 background: none; 102} 103 104@media(min-width:768px) { 105 #wrapper { 106 padding-left: 0; 107 } 108 #wrapper.toggled { 109 padding-left: 250px; 110 } 111 #sidebar-wrapper { 112 width: 0; 113 } 114 #wrapper.toggled #sidebar-wrapper { 115 width: 250px; 116 } 117 #page-content-wrapper { 118 position: relative; 119 } 120 #wrapper.toggled #page-content-wrapper { 121 position: relative; 122 margin-right: 0; 123 } 124} 125
CSS
CSS
1body { 2 background: #FAFAFA; 3} 4 5.container-fluid { 6 margin-bottom: 10px; 7} 8 9html, body { 10 height: 100%; 11 margin: 0; 12} 13 14#wrapper { 15 width: 100%; 16} 17 18#page-content-wrapper { 19 min-height: 100%; 20 margin-bottom: 50px; 21 padding-bottom: 100px; 22 position: relative; 23 padding-bottom: 20px; 24} 25 26footer { 27 position: absolute; 28 bottom: 0; 29 height: 50px; 30 background: #333; 31 width: 100%; 32} 33footer p { 34 color: #FFF; 35 text-align: center; 36 padding: 10px; 37} 38
試したこと
footerをwrapperよし下に記入した場合は、foooter意図したように動くのですが、サイドバーがでてくると、header部分は動いて、footer部分は動いていません。そのためwrapper内にfooterを固定しようと考えています。
また、現在のコードであると、コンテンツが少ない場合は大丈夫なのですが、多い場合はフッターがしたに固定されていますが、その下にコンテンツが現れてしまいます。
補足情報(FW/ツールのバージョンなど)
bootstrap4で実現しようと思っています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/17 12:52