質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

7745閲覧

bootstrap4のcontainer-fluidでサイドバースライドメニューの中でのfooter固定

yajin

総合スコア75

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/15 00:22

編集2018/02/15 03:59

前提・実現したいこと

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で実現しようと思っています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

以下のようにすることで質問者さんが実現したいことが行えると思いますが、いかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title> Pages </title> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"> 7 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> 8 <link href="./css/simple-sidebar.css" rel="stylesheet"> 9 <style> 10 html, body { 11 height: 100%; 12 margin: 0; 13 } 14 15 body { 16 background: #FAFAFA; 17 } 18 19 #wrapper { 20 width: 100%; 21 } 22 23 #page-content-wrapper { 24 min-height: 100%; 25 margin-bottom: 50px; 26 position: relative; 27 padding-bottom: 20px; 28 } 29 30 .container-fluid { 31 margin-bottom: 10px; 32 } 33 34 footer { 35 position: absolute; 36 bottom: 0; 37 left: 0; /* 追記 */ 38 height: 50px; 39 background: #333; 40 width: 100%; 41 } 42 43 footer p { 44 color: #FFF; 45 text-align: center; 46 padding: 10px; 47 } 48 </style> 49</head> 50<body> 51<div id="wrapper"> 52 <!-- Sidebar --> 53 <div id="sidebar-wrapper"> 54 <ul class="sidebar-nav"> 55 <li class="sidebar-brand"> 56 <a href="#"> 57 メニュー 58 </a> 59 </li> 60 <li> 61 <a href="#">ホーム</a> 62 </li> 63 <li> 64 <a href="#">ホーム</a> 65 </li> 66 <li> 67 <a href="#">ホーム</a> 68 </li> 69 <li> 70 <a href="#" class="btn btn-secondary menu-toggle">閉じる</a> 71 </li> 72 </ul> 73 </div> 74 <!-- /#sidebar-wrapper --> 75 <!-- Page Content --> 76 <div id="page-content-wrapper"> 77 <div class="container-fluid"> 78 <header></header> 79 <div class="row"> 80 <div class="col-sm-4"> 81 <a href="#menu-toggle" class="btn btn-secondary menu-toggle">Toggle Menu</a> 82 <button class="btn btn-secondary menu-toggle">あああ</button> 83 </div> 84 <div class="col-sm-4"> 85 </div> 86 <div class="col-sm-4"> 87 </div> 88 </div> 89 <p> 90 a<br/>コンテンツを適当に多くする。 91 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 92 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 93 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 94 </p> 95 <!-- <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a> --> 96 97 </div> 98 </div> 99 <!-- /#page-content-wrapper --> 100 <footer> 101 <p> 102 <small>ここがフッター</small> 103 </p> 104 </footer> 105</div> 106<!-- /#wrapper --> 107<!-- Bootstrap core JavaScript --> 108<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> 109<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 110<!-- Menu Toggle Script --> 111<script> 112 $(".menu-toggle").click(function (e) { 113 e.preventDefault(); 114 $("#wrapper").toggleClass("toggled"); 115 }); 116</script> 117</body> 118</html>

投稿2018/02/15 11:10

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yajin

2018/02/17 12:52

有難うございます!大変助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問