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

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

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

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

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

1557閲覧

Bootstrap4でコンテンツとフッターの間に不自然な隙間ができる

gobindar

総合スコア51

Bootstrap

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

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/11/08 07:49

発生している問題・エラーメッセージ

下記コーディングにて、サイドバー・コンテンツの下に隙間ができ、
その下にフッターがきてしまいます。
隙間がなぜ発生するかわかりません。

該当のソースコード

common.layout_common

1<body> 2 <div class="wrapper"> 3 4 <div class="container-fluid"> 5 <div class="row"> 6 7 <!-- left sidebar --> 8 <div class="d-none d-lg-block col-lg-2"> 9 @include('common.sidebar') 10 </div> 11 12 <!-- contents --> 13 <div class="col-md-12 col-lg-10"> 14 <div class="container"> 15 16 <div class="row"> 17 <div class="col-lg-12"> 18 </div> 19 </div> 20 21 <div class="row"> 22 <div class="col-lg-12"> 23 @yield('content') 24 </div> 25 </div> 26 27 <div class="row"> 28 <div class="col-lg-12"> 29 30 </div> 31 </div> 32 33 </div> 34 </div> 35 </div> 36 </div> 37 38 39 <!-- fotter --> 40 41 <footer> 42 @include('common.footer') 43 </footer> 44 45 46 </div> 47</body>

content

1@extends('common.layout_common') 2 3@section('content') 4 <div class="row"> 5 <div class="col-lg-12"> 6 7 <div class="table-responsive"> 8 ~~~ 9 </div> 10 11 </div> 12 </div> 13 14@endsection

footer

1<div class="footer"> 2~~ 3</div> 4

CSS

1.footer { 2 position: absolute; 3 bottom: 0; 4 width: 100%; 5 height: 130px; 6 background-color:#022051; 7 color: #fff; 8 text-align: center; 9 line-height: 20px; 10 font-size: 0.5rem; 11} 12 13.container-fluid { 14 min-height: 100%; 15 width: 100%; 16 padding-right: 15px; 17 padding-left: 15px; 18 padding-bottom: 130px; 19 margin-right: auto; 20 margin-left: auto; 21} 22 23.row { 24 display: -ms-flexbox; 25 display: flex; 26 -ms-flex-wrap: wrap; 27 flex-wrap: wrap; 28 margin-right: -15px; 29 margin-left: -15px; 30} 31 32.wrapper { 33 position: relative; 34 overflow: hidden; 35 min-height: 100%; 36} 37 38 .col-lg-12 { 39 -ms-flex: 0 0 100%; 40 flex: 0 0 100%; 41 max-width: 100%; 42 } 43

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

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

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

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

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

guest

回答1

0

自己解決

コンテンツの一部のheightが画面全体の%指定になっていたことが原因でした。

投稿2018/12/18 05:36

編集2018/12/18 05:36
gobindar

総合スコア51

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問