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

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

ただいまの
回答率

87.37%

スクロールして画面上部に来たら固定されるサイドバー

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 600

score 15

前提・実現したいこと

htmlとCSS、Bootstrap4などを使ってwebページを作っています。
Bootstrap4でメニューバーを画面上部に固定できるようにしました(Sticky-top)。
サイドバーも、メニューバーの直下についてきて画面上部に達したところで固定したいです。

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

1.</nav>の上の行に<div class="sidemenu"> ~ </div>の部分を入れると、サイドバーの横に大きな空白が出来てしまい、
2.CSSでposition:fixed;で固定するとスクロールについて来ずメニューバーとの間に隙間が生じてしまいます。
下のソースコードは2を試したときのものです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="contact.css">
    <!--CSS ライブラリ-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_editor.pkgd.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_style.min.css">
  </head>
<body>

        <header id="header"><!--ヘッダー画像-->
            <img src="" alt="Contact to us">
            <br>a</br><br>a</br><br>a</br>
        </header>
        <nav class="navbar sticky-top navbar-light bg-white"><!--トップメニュー--><!--重要なリンクへ飛ばすnav-->
            <div class="dropdown">
                <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    Home
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                    <li class="dropdown-item">
                        <a href="#">a</a>
                    </li>
                    <li class="dropdown-item">
                        <a href="#">b</a>
                    </li>
                    <li class="dropdown-item">
                        <a href="#">c</a>
                    </li>
                    <li class="dropdown-item">
                        <a href="#">d</a>
                    </li>
                    <li class="dropdown-item">
                        <a href="#">e</a>
                    </li>
                    <li class="dropdown-item">
                        <a href="#">f</a>
                    </li>
                </div>
            </div>
            <div class="dropdown">
                <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    A
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                </div>
            </div>
            <div class="dropdown">
                <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    B
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                </div>
            </div>
            <div class="dropdown">
                <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    C
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                </div>
            </div>
            <div class="dropdown">
                <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    D
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                </div>
            </div>
            <div class="dropdown">
                <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                   E
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu">
                </div>
            </div>
        </nav>
        <div class="wholearea">
        <div class="area" ><!--コンテンツ-->
            <div class="sidemenuboad">
            <div class="sidemenu"><!--サイドメニュー-->
                <div class="col-2">   
                    <section class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <table border="1" width="100%" table frame="void">
                            <input class="button1" type="button" value="A">
                            <input class="button1" type="button" value="B">
                            <input class="button1" type="button" value="C">
                            <input class="button1" type="button" value="D">
                            <input class="button1" type="button" value="E">
                            <input class="button1" type="button" value="F">
                            <input class="button1" type="button" value="G">
                            <input class="button1" type="button" value="H">
                        </table>
                    </section>
                </div>
            </div></div>
            <div class="contents"><!--メインコンテンツー-->
                <div class="col-10">
                <br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br>
                <br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br>
                <br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br><br>a</br>
                </div>
            </div>
        </div>

    </div>
            <footer class="footer"><!-- フッター -->
            <div>
                <p>aaaaaaaaaaaaa
           </div>
        </footer>
   </body>

</html>
@charset "utf-8";

body {
  width: 100%;
  background-color:#FFF;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", sans-serif;
  color:#000;
}

header {
  position:relative;
  text-align:center;
  overflow:visible;
  width:960px;
  margin:0 auto;
}
.wholearea{
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
/*-----メニューバーの設定-----*/
nav:first-of-type {/*メニューバーら辺*/
  text-align:center;
  width:960px;
  margin:0 auto;
  border-bottom:3px double black;
  margin:10px auto 15px auto;
}
.dropdown:hover > .dropdown-menu{
  display:block;
}
/*-----サイドメニューエリアの設定-----*/
.sidemenuboad{
  width:20%;
  float:right;
  background-color:rgb(181, 240, 240);
  padding-bottom: 32767px;
  margin-bottom: -32767px;
}
/*-----サイドメニューバーの設定-----*/
.sidemenu{
  height:300px;
  background-color:rgba(255, 255, 255,0);
  position:fixed;
}
.sidemenu [type="button"]{
  background-color:rgb(241, 197, 147);
  margin:5px 5px 0 5px;
  padding:2px 5px;
  width:150px;
  height:30px;
  text-align:center;
  display:inline-block;
  color:rgb(0, 0, 0);
  border-radius:5px;
} 
.sidemenu [type="button"]:hover{
  background-color:rgb(227, 230, 32);
}
/*-----メインエリアの設定-----*/
.contents{
  width:80%;

  float:left;
  background-color:rgb(247, 236, 179);
  overflow-wrap : break-word;
  padding-bottom: 32767px;
  margin-bottom: -32767px;
}
/*-----フッターの設定-----*/
.footer {
  clear:both;/*回り込み解除*/
  width:100%;
  border-top:10px solid #000;
  text-align:center;
}
.footer div p {
  font-size:0.7em;
  line-height:2.0em;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

参考サイト

上記サイトにこういう記述がありました。
・親要素(サイドバー)の高さをメインコンテンツと揃える必要があります。table-cellやfloatでレイアウトしていると上手く動作しない場合があります
・親や先祖要素にoverflow: hidden(scroll, auto)が使われていると上手く動作しません

修正した部分のみです

.wholearea{
  width:960px;
  margin:0 auto;
  /*overflow:hidden 削除 別調整が必要*/;
}

/*-----サイドメニューエリアの設定-----*/
.sidemenuboad{
  order: 2;/*追加*/
  width:20%;
  /*float:right;削除*/
  background-color:rgb(181, 240, 240);
  padding-bottom: 32767px;
  margin-bottom: -32767px;
}
/*-----サイドメニューバーの設定-----*/
.sidemenu{
  height:300px;
  background-color:rgba(255, 255, 255,0);
  position:sticky;
  top:60px;

}
/*-----メインエリアの設定-----*/
.contents{
  width:80%;
  order: 1;/*追加*/
  /*float:left; 削除 */ 
  background-color:rgb(247, 236, 179);
  overflow-wrap : break-word;
  padding-bottom: 32767px;
  margin-bottom: -32767px;
}

.area{
  display:flex;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/28 11:40

    floatがだめだったんですね。
    orderを知りませんでした。
    勉強になりました。
    ありがとうございます。

    キャンセル

  • 2019/08/28 11:47

    コンテンツの高さの調整についても、調べ手みたいと思います。

    キャンセル

  • 2019/08/28 12:05

    padding-bottom: 32767px;
    margin-bottom: -32767px;
    を消したら上手くいきました!!
    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る