前提・実現したいこと
htmlとCSS、Bootstrap4などを使ってwebページを作っています。
Bootstrap4でメニューバーを画面上部に固定できるようにしました(Sticky-top)。
サイドバーも、メニューバーの直下についてきて画面上部に達したところで固定したいです。
発生している問題・エラーメッセージ
1.</nav>の上の行に<div class="sidemenu"> ~ </div>の部分を入れると、サイドバーの横に大きな空白が出来てしまい、 2.CSSでposition:fixed;で固定するとスクロールについて来ずメニューバーとの間に隙間が生じてしまいます。 下のソースコードは2を試したときのものです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <link rel="stylesheet" href="contact.css"> 8 <!--CSS ライブラリ--> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/froala/design-blocks@master/dist/css/froala_blocks.min.css"> 11 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"> 12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_editor.pkgd.min.css"> 13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_style.min.css"> 14 </head> 15<body> 16 17 <header id="header"><!--ヘッダー画像--> 18 <img src="" alt="Contact to us"> 19 <br>a</br><br>a</br><br>a</br> 20 </header> 21 <nav class="navbar sticky-top navbar-light bg-white"><!--トップメニュー--><!--重要なリンクへ飛ばすnav--> 22 <div class="dropdown"> 23 <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 24 aria-expanded="false"> 25 Home 26 </button> 27 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 28 <li class="dropdown-item"> 29 <a href="#">a</a> 30 </li> 31 <li class="dropdown-item"> 32 <a href="#">b</a> 33 </li> 34 <li class="dropdown-item"> 35 <a href="#">c</a> 36 </li> 37 <li class="dropdown-item"> 38 <a href="#">d</a> 39 </li> 40 <li class="dropdown-item"> 41 <a href="#">e</a> 42 </li> 43 <li class="dropdown-item"> 44 <a href="#">f</a> 45 </li> 46 </div> 47 </div> 48 <div class="dropdown"> 49 <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 50 aria-expanded="false"> 51 A 52 </button> 53 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 54 </div> 55 </div> 56 <div class="dropdown"> 57 <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 58 aria-expanded="false"> 59 B 60 </button> 61 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 62 </div> 63 </div> 64 <div class="dropdown"> 65 <button type="button" href="#" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 66 aria-expanded="false"> 67 C 68 </button> 69 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 70 </div> 71 </div> 72 <div class="dropdown"> 73 <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 74 aria-expanded="false"> 75 D 76 </button> 77 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 78 </div> 79 </div> 80 <div class="dropdown"> 81 <button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" 82 aria-expanded="false"> 83 E 84 </button> 85 <div class="dropdown-menu" aria-labelledby="dropdownMenu"> 86 </div> 87 </div> 88 </nav> 89 <div class="wholearea"> 90 <div class="area" ><!--コンテンツ--> 91 <div class="sidemenuboad"> 92 <div class="sidemenu"><!--サイドメニュー--> 93 <div class="col-2"> 94 <section class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> 95 <table border="1" width="100%" table frame="void"> 96 <input class="button1" type="button" value="A"> 97 <input class="button1" type="button" value="B"> 98 <input class="button1" type="button" value="C"> 99 <input class="button1" type="button" value="D"> 100 <input class="button1" type="button" value="E"> 101 <input class="button1" type="button" value="F"> 102 <input class="button1" type="button" value="G"> 103 <input class="button1" type="button" value="H"> 104 </table> 105 </section> 106 </div> 107 </div></div> 108 <div class="contents"><!--メインコンテンツー--> 109 <div class="col-10"> 110 <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> 111 <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> 112 <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> 113 </div> 114 </div> 115 </div> 116 117 </div> 118 <footer class="footer"><!-- フッター --> 119 <div> 120 <p>aaaaaaaaaaaaa 121 </div> 122 </footer> 123 </body> 124 125</html> 126
CSS
1@charset "utf-8"; 2 3body { 4 width: 100%; 5 background-color:#FFF; 6 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", sans-serif; 7 color:#000; 8} 9 10header { 11 position:relative; 12 text-align:center; 13 overflow:visible; 14 width:960px; 15 margin:0 auto; 16} 17.wholearea{ 18 width:960px; 19 margin:0 auto; 20 overflow:hidden; 21} 22/*-----メニューバーの設定-----*/ 23nav:first-of-type {/*メニューバーら辺*/ 24 text-align:center; 25 width:960px; 26 margin:0 auto; 27 border-bottom:3px double black; 28 margin:10px auto 15px auto; 29} 30.dropdown:hover > .dropdown-menu{ 31 display:block; 32} 33/*-----サイドメニューエリアの設定-----*/ 34.sidemenuboad{ 35 width:20%; 36 float:right; 37 background-color:rgb(181, 240, 240); 38 padding-bottom: 32767px; 39 margin-bottom: -32767px; 40} 41/*-----サイドメニューバーの設定-----*/ 42.sidemenu{ 43 height:300px; 44 background-color:rgba(255, 255, 255,0); 45 position:fixed; 46} 47.sidemenu [type="button"]{ 48 background-color:rgb(241, 197, 147); 49 margin:5px 5px 0 5px; 50 padding:2px 5px; 51 width:150px; 52 height:30px; 53 text-align:center; 54 display:inline-block; 55 color:rgb(0, 0, 0); 56 border-radius:5px; 57} 58.sidemenu [type="button"]:hover{ 59 background-color:rgb(227, 230, 32); 60} 61/*-----メインエリアの設定-----*/ 62.contents{ 63 width:80%; 64 65 float:left; 66 background-color:rgb(247, 236, 179); 67 overflow-wrap : break-word; 68 padding-bottom: 32767px; 69 margin-bottom: -32767px; 70} 71/*-----フッターの設定-----*/ 72.footer { 73 clear:both;/*回り込み解除*/ 74 width:100%; 75 border-top:10px solid #000; 76 text-align:center; 77} 78.footer div p { 79 font-size:0.7em; 80 line-height:2.0em; 81}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/28 02:40
2019/08/28 02:47
2019/08/28 03:05