お世話になっております。
当方Laravel5.5・Bootstrap4を使用してWebSiteを構築しております、
環境はmac OS Mojave10.14.2
ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。
困っていること
sidebarをfooterの位置まで伸ばしたいのですが、
bodyの部分がfooterの位置まで伸びず、
結果bodyの下位にあるsidebarが下まで伸びません。
現状
※見やすいようにfontのcssは省いています
- 構成最上位
body
php
1body { 2 padding-top: 71px; 3 margin: 0px; 4 height: 100%; 5 line-height: 0.7rem; 6}
- 2位
navbar(ヘッダ) wrapper
wrapper
php
1wrapper { 2 position: relative; 3 overflow: hidden; 4 min-height: 100%; 5}
- 3位 (wrapperの下)
containerfluid footer(この下はtextのみでheightやmarginなし)
containerfluid
php
1container-fluid { 2 min-height: 100%; 3 width: 100%; 4 padding-right: 15px; 5 padding-left: 15px; 6 padding-bottom: 130px; 7 margin-right: auto; 8 margin-left: auto; 9}
footer
php
1.footer { 2 position: absolute; 3 display: table; 4 bottom: 0; 5 width: 100%; 6 height: 130px; 7}
- 4位 (containerfluidの下)
row
php
1.row { 2 display: flex; 3 flex-wrap: wrap; 4 margin-right: -15px; 5 margin-left: -15px;
- 5位
左:class="d-none d-lg-block col-lg-2 no-padding"
右:class="col-md-12 col-lg-10"
全てbootstrap標準通りです。
container
php
1 width: 100%; 2 padding-right: 15px; 3 padding-left: 15px; 4 margin-right: auto; 5 margin-left: auto;
- 6位
左:class="sidebar border"(この下はメニューのみ=左側のbody最下位)
右:class="container"
sidebar border
php
1 width: 100%; 2 height: 100%; 3 bottom: 0;
container
php
1 width: 100%; 2 padding-right: 15px; 3 padding-left: 15px; 4 margin-right: auto; 5 margin-left: auto;
- 7位 (containerの下)
rowが3行で、
一番下のrowがclass="col-lg-12"
標準通りです。
- 8位
class="advertisement mx-auto w-15"
php
1argin-top: 4rem; 2 margin-bottom: 2rem;
試したこと
- 上位・下位の要素を全てheight100%、margin0、padding0としても
不自然な隙間が開きます。
- container-fluidのpaddingを0とし、
footerの高さをheight100%に変更するなど
しましたが、全く動きはありませんでした。
- chromeの検証を使用して、隙間のところにカーソルを
当てても、何も要素が表示されません。
(何かのpaddingやmarginではなく、かつ要素があるわけでもなさ
そうです)
宜しくお願い致します。
追記
該当コードのレイアウトを追記します。
(コンポーネントまでは様々あるため追記できませんが、
コンポーネントの縦の長さが短い場合は問題が発生します。
長い場合はbodyがfooterにつくため発生しません。)
php
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5<meta charset="utf-8"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<meta name="viewport" content="width=device-width, initial-scale=1"> 8 9<!--favicon--> 10<link rel="shortcut icon" href="{{ asset('/images/favicon.ico') }}"> 11 12<!--style source--> 13//省略 14 15 <!-- hedder --> 16 @include('common.header_component') 17 18</head> 19 20<body> 21 <div class="wrapper"> 22 <div class="container-fluid"> 23 <div class="row"> 24 25 <!-- left sidebar --> 26 <div class="d-none d-lg-block col-lg-2 no-padding"> 27 @include('common.sidebar_component') 28 </div> 29 30 <!-- contents --> 31 <div class="col-md-12 col-lg-10"> 32 <div class="container"> 33 34 <div class="row"> 35 <div class="col-lg-12"> 36 <div class="title_frame"> 37 @yield('title_content') 38 </div> 39 </div> 40 </div> 41 42 <div class="row"> 43 <div class="col-lg-12"> 44 <!-- content --> 45 @yield('content') 46 </div> 47 </div> 48 49 <!-- button area --> 50 <div class="row"> 51 52 @yield('button') 53 54 </div> 55 56 <div class="row"> 57 <div class="col-lg-12 both-side-padding"> 58 @component('common.advertise_component') 59 @endcomponent 60 </div> 61 </div> 62 </div> 63 </div> 64 65 </div> 66 </div> 67 68 @include('common.footer_component') 69 70 71 </div> 72</body> 73 74</html>
footer
php
1<div class="footer"> 2 <div class="text"> 3 <a href="show_AAAAA">AAAAA</a> 4 <!-- <a href="AAAAA.php">AAAAA</a> --> 5 <a href="show_AAAAA">AAAAA</a><br /> 6 <a href="show_AAAAA">AAAAA</a><br /> 7 <a href="show_AAAA">AAAAA</a> 8 <a href="AAAAA">AAAAA</a><br /> 9 <div class="pr">Copyright© <a href="index.php">AAAAA</a> All Rights Reserved.</div> 10 <div> 11</div> 12
sidebar
php
1<div class="sidebar border"> 2 <nav class="sidebar-menu" role="navigation"> 3 <ul> 4 <li class="bg-deepblue">AAAAAA</li> 5 <div class="d-block my-1"> 6 <div class="dropright_top"> 7 <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 8 <ul class="dropdown-menu multi-level"> 9 <li><a href="#">Default</a></li> 10 <li class="dropdown-submenu"> 11 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 12 <ul class="dropdown-menu"> 13 <li><a href="#">sub menu1</a></li> 14 <li class="dropdown-submenu"> 15 <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> 16 <ul class="dropdown-menu"> 17 <li class="dropdown-submenu"> 18 <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> 19 <ul class="dropdown-menu"> 20 <li><a href="#">sub menu3</a></li> 21 <li><a href="#">sub menu3</a></li> 22 <li><a href="#">sub menu3</a></li> 23 <li><a href="#">sub menu3</a></li> 24 <li><a href="#">sub menu3</a></li> 25 <li><a href="#">sub menu3</a></li> 26 </ul> 27 </li> 28 </ul> 29 </li> 30 </ul> 31 </li> 32 </ul> 33 </div> 34 </div> 35 <li class="bg-deepblue">AAAAAA</li> 36 <div class="d-block my-1"> 37 <div class="dropright_top"> 38 <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 39 <ul class="dropdown-menu multi-level"> 40 <li><a href="#">Default</a></li> 41 <li class="dropdown-submenu"> 42 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 43 <ul class="dropdown-menu"> 44 <li><a href="#">sub menu1</a></li> 45 <li class="dropdown-submenu"> 46 <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> 47 <ul class="dropdown-menu"> 48 <li class="dropdown-submenu"> 49 <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> 50 <ul class="dropdown-menu"> 51 <li><a href="#">sub menu3</a></li> 52 <li><a href="#">sub menu3</a></li> 53 <li><a href="#">sub menu3</a></li> 54 </ul> 55 </li> 56 </ul> 57 </li> 58 </ul> 59 </li> 60 </ul> 61 </div> 62 </div> 63 <li class="bg-deepblue">AAAAAA</li> 64 </ul> 65</nav> 66</div>
title content・content
php
1@extends('common.layout_common') 2 3 @section('title_content') 4 <div class="title_letter d-inline">AAAA</div> 5 <div class="d-inline search_result"> 6 @if(count($AAAAdata) > 0) 7 ( {{$AAAAdata->count()}} / 8 {{$AAAAdata->total()}} 件を表示中 ) 9 @endif 10 </div> 11 @endsection 12 13 @section('content') 14 <div class="row"> 15 <div class="col-lg-12"> 16 17 @component('common.middle_title_component') 18 @slot('title') 19 AAAA 20 @endslot 21 @endcomponent 22 23 @if(count($AAAAdata) > 0) 24 25 @component('AAAA.AAAA_list_component') 26 @endcomponent 27 28 @else 29 <div class="text-center my-5">AAAA</div> 30 @endif 31 32</div> 33</div> 34 35@endsection
AAAA_list_component
php
1 @foreach ($AAAdata as $AAA) 2 @if ($loop->iteration % 4 == 1) 3 <div class="row"> 4 @endif 5 6 <div class="col-md-3 col-sm-6 mb-2"> 7 <a class="link" href="{{ route('AAAAA') }}"> 8 <div class="card"> 9 <img class="card-img-top" src='{{ asset($AAA) }}' alt="AAA"> 10 <div class="card-body"> 11 <div class="card-title"> 12 </div> 13 </div> 14 <div class="card-footer"> 15 <i class="far fa-heart"></i><span style="margin-right:0.5em;"></span> 16 <i class="far fa-comment"></i> 17 </div> 18 </div> 19 </div> 20 21 @if ($loop->iteration % 4 == 0 || $loop->last) 22 </div> 23 @endif 24 25 @endforeach 26
common.advertise_component
php
1 <div class="advertisement mx-auto w-15"> 2 <img src="{{ asset('AAAA') }}" class="img-fluid" alt="banner1"> 3 </div>
回答1件
あなたの回答
tips
プレビュー