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

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

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

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

CSS

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

Q&A

解決済

1回答

1153閲覧

コンテンツが下の方に行くと、サイドバーのホバーに隙間ができる

mikeko0901

総合スコア227

Bootstrap

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

CSS

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

1グッド

1クリップ

投稿2020/07/17 14:01

編集2020/07/18 01:51

Bootstrapと独自CSSで2カラムレイアウトの管理画面を制作しております。
コンテンツが増えると、サイドバーのホバーの背景色が隙間が空いてしまいます。
どうやら、コンテンツが増えると何かが右側のコンテンツ部分を押し広げているようで、
サイドバーの幅が若干狭くなってしまうようです。

例えば、
イメージ説明
↑こちらはサイドバーのリンクの背景がサイドバーの幅きっちりついていますが、

イメージ説明
右側のコンテンツがスクロールが必要になるくらいの長さになると、サイドバーのliの背景が、右側に微妙に隙間が出てしまいます。

この隙間をなくしたいのですが、どうやってもなくなりません・・・
アドバイスいただけますと幸いです。

以下、コードです。

html(隙間が空いている時のもの)

<!DOCTYPE html> <html lang="ja"> <?php print($layout_head); ?> <body> <div class="container-fluid"> <div class="row"> <!-- サイドバースタート --> <div class="col-md-2 px-0 position-fixed" id="sticky-sidebar"> <div class="side-title d-flex align-items-center pl-2"> <a href="[dir]index.php">Base <i class="fas fa-phone"></i> Call</a> </div> <div class="side-nav" id="nav-bar"> <nav id="n"> <ul class="navbar-nav side-menu"> <li class="[selected_callset]"> <a href="[dir]callset/list.php" class="pl-4"><i class="fas fa-phone-volume"></i> コール</a> </li> <li class="[selected_base]"> <a href="[dir]base/list.php" class="pl-4"><i class="fas fa-users"></i> 拠点</a> </li> <li class="[selected_scenario]"> <a href="[dir]scenario/list.php" class="pl-4"><i class="fas fa-book-open"></i> シナリオ</a> </li> <li class="[selected_setting]"> <a href="[dir]setting/list.php" class="pl-4"><i class="fas fa-cog"></i> 設定</a> </li> <li class="[selected_account]"> <a href="[dir]account/list.php" class="pl-4"><i class="fas fa-desktop"></i> アカウント</a> </li> </ul> <div class="d-flex align-items-center border-top loginchu"> <div class="pl-4 mt-4"> <?php h($account_name); ?>さんログイン中 </div> </div> <div class="d-flex align-items-center logout"> <a href="" class="pl-4 mt-2 lnk_logout2"><i class="fas fa-sign-out-alt"></i> ログアウト</a> </div> </nav> </div> </div> <!-- サイドバー終了 -->      <div class="col-md-10 offset-md-2" id="main"> <div id="wrapper"> <div class="mt-4 mb-4"> <h1 class="HalfSingle"><i class="fas fa-users h1-icon fa-fw"></i> 拠点登録</h1> </div> <div class="mt-4 mb-4 contents-area card border-0"> <div class="p-3"> <div class="error" id="result"></div> <form method="post" action=""> <div class="form-group row mt-4"> <label class="col-md-3 col-form-label">拠点名(必須)</label> <div class="col-md-6"> <input type="text" class="form-control" name="base_name"> </div> </div> <div class="form-group row"> <label class="col-md-3 col-form-label">電話番号 例:0311112222(必須)</label> <div class="col-md-6"> <input type="text" class="form-control" name="phone_number"> </div> </div> <div class="form-group row"> <div class="col-md-12 mt-4"> <button type="button" id="base_regist" class="btn btn-add">登録</button> あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/>あ<br/> </div> </div> </form> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="../../style/admin.js"></script> <script> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script> </body> </html>

css

html { height: 100%; font-size: 14px; } body { height: 100%; margin: 0; font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; color: #494949; background: #F6F6F6; } a { color: #1C7EC4; } a:hover { color: #1C7EC4; text-decoration: none; } h1 { font-size: 28px; font-weight: bold; } .h1-icon { color: #1C7EC4; } h4 { color: #A08ACF; } .container-fluid { height: 100%; } /*サイドバー*/ #sticky-sidebar { position: fixed; height: 100%; width: 100%; background: #ffffff; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .5); } .side-title { background: #ffffff; height: 70px; color: #1C7EC4; font-size: 20px; } .side-title a { color: #1C7EC4; font-weight: bold; } .side-title a:hover { cursor: pointer; transform: scale(1.1); } .side-nav ul li { display: table; width: 100%; } .side-nav ul li a { display: table-cell; vertical-align: middle; height: 100%; color: #494949; } .navbar-nav li a:hover { background: -moz-linear-gradient(65deg, #1C7EC4, #885CCC); background: -webkit-linear-gradient(65deg, #1C7EC4, #885CCC); background: linear-gradient(25deg, #1C7EC4, #885CCC); color: #ffffff; } .navbar-nav li.selected a { background: -moz-linear-gradient(65deg, #1C7EC4, #885CCC); background: -webkit-linear-gradient(65deg, #1C7EC4, #885CCC); background: linear-gradient(25deg, #1C7EC4, #885CCC); color: #ffffff !important; } .navbar-nav li { height: 50px; } /*サイドバーのログイン中*/ .logout a { color: #494949; font-size: 10px; } .logout a:hover { cursor: pointer; transform: scale(1.1); } .loginchu { color: #494949; font-size: 10px; } /*エラーテキスト*/ .error { color: #ff0000; } /*スマホの時*/ @media screen and (max-width: 768px) { #sticky-sidebar { display: none; } #nav-drawer { display:inline!important; position: absolute; } #sm-title { display:inline!important; font-weight: bold; } .hambargar-title { display:inline!important; font-weight: bold; font-size: 18px; color: #33B1A9; } .sm-head { position: relative; height: 50px; border-bottom: solid 1px #CCCCCC; } /*スマホの時は空けるのを消す*/ /* #main { padding-left: 5%!important; padding-right: 5%!important; } */ } /*PCの時はサイドバー分あける*/ /* #main { padding-left: 18%; padding-right: 2%; width: 100%; } */ /*コンテンツエリア*/ #wrapper { /*height: 100%; これを消すとシナリオ登録の隙間がなくなる*/ color: #494949; } .contents-area { height: 100%; } /*カードの大枠が大きすぎるので*/ .card-deck { margin-right: 0px !important; margin-left: 0px !important; } /*線*/ .hr-nomal { height: 5px; background-color: rgba(28,126,196,.5); width: 100%; border: none; border-radius: 2px; } /*シナリオ一覧のカードの高さをそろえるために*/ .scenario-card { padding-top: 15px; padding-bottom: 15px; }
Lhankor_Mhy👍を押しています

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

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

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

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

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

FrontEnd_Japan

2020/07/17 17:14

コンテンツが増えることで、サイドナビがおかしくなるとのことですので、 コンテンツ部分のHTMLとCSSも掲載いただけますと幸いです。
mikeko0901

2020/07/18 01:52

htmlは隙間が出るキャプチャのものをそのまま(scriptとかは文字数制限もありはしょってますが)載せています。 CSSはボタン以外追記しました!
guest

回答1

0

ベストアンサー

ご提示のコードを試してみましたところ、Firefoxでは再現せず、Chromeで再現しました。

いろいろ試してみた結果、display: tableが原因ではないか、と感じました。

Chromeではdisplay:tableの要素の幅は整数にしかならないようです。

中堅コーダーがハマった「display:table」の落とし穴3つ。 | ネクストページブログ

このため、display: tableの幅が小数になった場合、その子要素が整数に切り捨てられ、1px未満の隙間が空いていることが原因ではないかと思います。


色々な解決方法が考えられますが、当方の環境では、このようなCSSを追加して、テーブルレイアウトをやめると問題は解消されました。
なお、テーブルレイアウトを解除したため、縦方向センタリングは解除されていますので、適宜指定してください。

css

1 ul.side-menu li{ 2 display: flex; 3 } 4 .pl-4{ 5 flex: 1 1 auto; 6 }

投稿2020/07/21 03:25

編集2020/07/21 03:34
Lhankor_Mhy

総合スコア35865

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

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

mikeko0901

2020/07/22 09:41

実際にコードまで試していただき、ありがとうございました! いただきましたcssで隙間なく実装できました。 display:tableが原因とは思ってもみませんでした・・・ 貴重なご意見、本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問