発生している問題・エラーメッセージ
下記コーディングにて、サイドバー・コンテンツの下に隙間ができ、
その下にフッターがきてしまいます。
隙間がなぜ発生するかわかりません。
該当のソースコード
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。