Q&A
素のｈｔｍｌをご提示ください
お世話になっております。
当方Laravel5.5にてWebSiteを構築しております、
環境はmac OS Mojave10.14.2
ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。
やりたいこと
下記質問に記載の通り、サイドバーを下のフッターの位置まで
伸ばしたい(現状は下記質問時と同じです)のですが、
全体を覆う要素(wrapper)にd-flexを付与したところ、
テーブルのoverflow-x: auto;が効かなくなってしまいました。
https://teratail.com/questions/182096
代替手段がなかなか見つからないため、
知見を共有して頂けないでしょうか。
宜しくお願い致します。
現状
※一旦
https://teratail.com/questions/182096
質問当初の状態に戻しております
不自然な間が開くケース(検索画面だが、検索がヒットしなかった場合＝要素の縦の
長さが短い場合に発生するため、テーブル要素はない)
php
1 2<body> 3<div class="wrapper"> 4<div class="container-fluid"> 5<div class="row"> 6 7<!-- left sidebar --> 8<div class="d-none d-lg-block col-lg-2 no-padding"> 9<div class="sidebar border"> 10<nav class="sidebar-menu" role="navigation"> 11<ul> 12<li class="bg-deepblue">AAA</li> 13<div class="d-block my-1"> 14<div class="dropright_top"> 15<a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 16<ul class="dropdown-menu multi-level"> 17<li><a href="#">Default</a></li> 18<li class="dropdown-submenu"> 19<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 20<ul class="dropdown-menu"> 21<li><a href="#">sub menu1</a></li> 22<li class="dropdown-submenu"> 23<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> 24<ul class="dropdown-menu"> 25<li class="dropdown-submenu"> 26<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> 27<ul class="dropdown-menu"> 28<li><a href="#">sub menu3</a></li> 29</ul> 30</li> 31</ul> 32</li> 33</ul> 34</li> 35</ul> 36</div> 37</div> 38<li class="bg-deepblue">BBBB</li> 39<div class="d-block my-1"> 40<div class="dropright_top"> 41<a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 42<ul class="dropdown-menu multi-level"> 43<li><a href="#">Default</a></li> 44<li class="dropdown-submenu"> 45<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 46<ul class="dropdown-menu"> 47<li><a href="#">sub menu1</a></li> 48<li class="dropdown-submenu"> 49<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> 50<ul class="dropdown-menu"> 51<li class="dropdown-submenu"> 52<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> 53<ul class="dropdown-menu"> 54 55<li><a href="#">sub menu3</a></li> 56</ul> 57</li> 58</ul> 59</li> 60</ul> 61</li> 62</ul> 63</div> 64</div> 65<li class="bg-deepblue">CCCCC</li> 66</ul> 67</nav> 68</div> 69</div> 70 71<!-- contents --> 72<div class="col-md-12 col-lg-10"> 73<div class="container"> 74 75<div class="row"> 76<div class="col-lg-12"> 77<div class="title_frame"> 78<div class="title_letter d-inline"> 79DDDDDD 80</div> 81<div class="d-inline search_result"> 82</div> 83</div> 84</div> 85</div> 86 87<div class="row"> 88<div class="col-lg-12"> 89<!-- content --> 90<div class="row"> 91<div class="col-lg-12"> 92 93<div class="middle_title"> 94<div class="middle_title_text"> 95<strong>EEEEEE</strong> 96</div> 97</div> 98 99<div class="text-center my-5">FFFFFFF</div> 100 101</div> 102</div> 103</div> 104</div> 105 106<!-- button area --> 107<div class="row"> 108 109 110</div> 111 112<!-- advertisement --> 113<div class="row"> 114<div class="col-lg-12 both-side-padding"> 115<div class="advertisement mx-auto w-7"> 116<img src="AAA.png" class="img-fluid" alt="banner1"> 117</div> 118</div> 119</div> 120</div> 121</div> 122 123</div> 124</div> 125<div class="footer"> 126<div class="text"> 127<a href="AAAA">AAAAAA</a> 128<div class="pr">Copyright© <a href="index.php">AAAAAA</a> All Rights Reserved.</div> 129<div> 130</div> 131</div>
不自然な間が開かないケース(テーブル要素があり、要素の縦が長いため、間が空かない)
php
1 2<body> 3<div class="wrapper"> 4<div class="container-fluid"> 5<div class="row"> 6 7<!-- left sidebar --> 8<div class="d-none d-lg-block col-lg-2 no-padding"> 9<div class="sidebar border"> 10<nav class="sidebar-menu" role="navigation"> 11<ul> 12<li class="bg-deepblue">AAAA</li> 13<div class="d-block my-1"> 14<div class="dropright_top"> 15<a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 16<ul class="dropdown-menu multi-level"> 17<li><a href="#">Default</a></li> 18<li class="dropdown-submenu"> 19<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 20<ul class="dropdown-menu"> 21<li><a href="#">sub menu1</a></li> 22<li class="dropdown-submenu"> 23<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> 24<ul class="dropdown-menu"> 25<li class="dropdown-submenu"> 26<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> 27<ul class="dropdown-menu"> 28<li><a href="#">sub menu3</a></li> 29</ul> 30</li> 31</ul> 32</li> 33</ul> 34</li> 35</ul> 36</div> 37</div> 38<li class="bg-deepblue">AAAA</li> 39<div class="d-block my-1"> 40<div class="dropright_top"> 41<a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 42<ul class="dropdown-menu multi-level"> 43<li><a href="#">Default</a></li> 44<li class="dropdown-submenu"> 45<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 46<ul class="dropdown-menu"> 47<li><a href="#">sub menu1</a></li> 48<li class="dropdown-submenu"> 49<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> 50<ul class="dropdown-menu"> 51<li class="dropdown-submenu"> 52<a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> 53<ul class="dropdown-menu"> 54<li><a href="#">sub menu3</a></li> 55<li><a href="#">sub menu3</a></li> 56<li><a href="#">sub menu3</a></li> 57</ul> 58</li> 59</ul> 60</li> 61</ul> 62</li> 63</ul> 64</div> 65</div> 66<li class="bg-deepblue">AAAA</li> 67</ul> 68</nav> 69</div> 70</div> 71 72<!-- contents --> 73<div class="col-md-12 col-lg-10"> 74<div class="container"> 75 76<div class="row"> 77<div class="col-lg-12"> 78<div class="title_frame"> 79<div class="title_letter d-inline"> 80AAAA 81</div> 82<div class="d-inline search_result"> 83( 2 / 843 件を表示中 ) 85</div> 86</div> 87</div> 88</div> 89 90<div class="row"> 91<div class="col-lg-12"> 92<!-- content --> 93<div class="row"> 94<div class="col-lg-12"> 95 96<div class="middle_title"> 97<div class="middle_title_text"> 98<strong>AAAA</strong> 99</div> 100</div> 101 102 103<div class="table-responsive-xl"> 104<table class="table table-bordered tablefix" > 105<!-- title row--> 106<tr> 107<th style="width:20px;">ID</th> 108<th style="width:130px;"AAAA</th> 109<th style="width:120px;">AAAA</th> 110<th style="width:250px;">AAAA</th> 111<th style="width:250px;">AAAA</th> 112<th style="width:50px;">AAAA</th> 113</tr> 114 115<tr> 116<td style="width:25px;">3</td> 117<td style="width:180px;">AAAA</td> 118<td style="width:120px;">sadgasdg</td> 119<td style="width:450px;">asdg</td> 120<td style="width:450px;">asdg / adsg</td> 121<td style="width:80px; text-align:center;"> 122<a href="AAAA">AAAA</a> 123</td> 124</tr> 125<tr> 126<td style="width:25px;">2</td> 127<td style="width:180px;">AAAA</td> 128<td style="width:120px;">adsgds</td> 129<td style="width:450px;">sadg</td> 130<td style="width:450px;">adsg / asdg</td> 131<td style="width:80px; text-align:center;"> 132<a href="AAAA">AAAA</a> 133</td> 134</tr> 135 136</table> 137</div> 138 139<a href="AAAA" class="AAAA"><i class="fas fa-file-download mr-1"></i>AAAA</a> 140 141<ul class="pagination"> 142 143<!-- <li class="page-item disabled"><span class="page-link">«</span></li> --> 144<li class="page-item disabled"><span class="page-link"></span></li> 145 146 147 148 149 150<li class="page-item active"><span class="page-link">1</span></li> 151<li class="page-item"><a class="page-link" hAAAA">2</a></li> 152 153 154<!-- <li class="page-item"><a class="page-link" href="AAAA" rel="next">»</a></li> --> 155<li class="page-item"><a class="page-link" href="AAAA" rel="next"><u>次へ</u></a></li> 156</ul> 157 158 159 160</div> 161</div> 162</div> 163</div> 164 165<!-- button area --> 166<div class="row"> 167 168 169</div> 170 171<!-- advertisement --> 172<div class="row"> 173<div class="col-lg-12 both-side-padding"> 174<div class="advertisement mx-auto w-7"> 175<img src="AAAA" class="img-fluid" alt="banner1"> 176</div> 177</div> 178</div> 179</div> 180</div> 181 182</div> 183</div> 184<div class="footer"> 185<div class="text"> 186<a href="AAAA">AAAA</a><br /> 187<div class="pr">Copyright© <a href="index.php">AAAA</a> All Rights Reserved.</div> 188<div> 189</div> 190 191 192</div>
テーブル要素のcss
php
1@media (max-width: 1199.98px) 2.table-responsive-xl { 3display: block; 4width: 100%; 5overflow-x: auto;} 6 7
A_O_A様
修正依頼ありがとうございます。
質問に追記致しました。
言葉足らずですみません、もしｃｓｓがあればｃｓｓもご提示ください
cssは質問にあります通り、こちらに記載の通りです
https://teratail.com/questions/182096
tableがないみたいですがどこにありますか
overflow-x: auto;もみあたりません
記載が漏れておりました。申し訳ありません。
再度、ご確認頂けますでしょうか。
ul 直下に div が来ているのを直すのが先決では？
回答1件
0
ベストアンサー
自己解決できるように調べ方を示します。
Chrome デベロッパーツールの使い方まとめ - Qiita
インスペクター - 開発ツール | MDN
webブラウザ（ChromeやFirefox）に付属する
デベロッパーツールや開発ツールで、
改善したい箇所をポイントすることで、
付近のhtml構造や該当htmlに適用されているcssが判明するので、
リアルタイムにスタイルを調整して改善されるか見ることもできますので、
さぁがんばれ。
--
無駄を省くというポイントとして、例えば
<div class="row"> <!-- left sidebar --> <div class="d-none d-lg-block col-lg-2 no-padding">
↓
<div class="row"> <div class="d-none d-lg-block col-lg-2 no-padding">
などとするとか。
<ul class="dropdown-menu"> <li><a href="#">sub menu3</a></li> </ul>
↓
<ul class="dropdown-menu"> <li><a href="#">sub menu3</a></li> </ul>
か
<ul class="dropdown-menu"><li><a href="#">sub menu3</a></li></ul>
などとするとか。
ブロック要素の境目にある改行コードや、半角空白や全角空白、コメント行を無駄と呼びます。
投稿2019/04/02 00:40
編集2019/04/02 04:26
退会済みユーザー
総合スコア0
m6u様
ご回答ありがとうございます。
ご提示頂きました内容はすでに存じ上げておりまして、
デベロッパーツールを使用して、数日調査致しました。
まず、隙間部分を指しても、何も表示されないです。
(前回の質問にも記載させていただきましたが、
margin・paddingの設定がないにもかかわらず、隙間が発生します)
そこで、それぞれのパーツのheightを変えてみたりと色々試しましたが、
どうしてもうまく行かず、当質問を差し上げている次第です。
仰る通り自己解決の方法を知るのが一番良いのは
本当にその通りだと思いますので、
ご教示頂き、ありがとうございます。
半角空白や全角空白、改行などがあると、意図せず隙間ができたりします。
コメント行なども一旦省いて、無駄な箇所を消し込んだものを試しに作ってみてください。
改行を全て削除してみたところ、問題が解消致しました。
ありがとうございました。
空白はツールでチェックしていたのですが、
改行でこういった現象が発生することは知りませんでした。
大変勉強になりました、
また機会がありましたら宜しくお願い致します。
あなたの回答
tips
プレビュー
