フレームのサイズ変更に従って移動していないナビゲータの下部にあるアイコン

Question

navbarの下部に何かを配置しようとしています。

サンプルコード：https://jsfiddle.net/545cdqb2/1/

コードのこの部分に問題があります。フレームのサイズ変更時に

.push-to-bottom 
{ 
    position: absolute; 
    bottom: 0px; 
    height: 100px; 
    width: 100%; 
} 

、「赤divが」その背後にあるナビゲーションバーの要素を隠し、私はそれらをクリックすることができませんでしだ。

Issue screenshot

Answer 1

これを使用してください。

.push-to-bottom { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 

 
/* https://github.com/samrayner/bootstrap-side-navbar#css */ 
 

 
@media (max-width: 768px) { 
 
    .navbar-fixed-side { 
 
    margin-left: -15px; 
 
    margin-right: -15px 
 
    } 
 
} 
 

 
@media (min-width: 768px) { 
 
    .navbar-fixed-side { 
 
    position: fixed; 
 
    margin: 0 -15px; 
 
    height: 100vh; 
 
    width: inherit; 
 
    overflow: auto; 
 
    border-top-width: 0; 
 
    border-bottom-width: 0; 
 
    border-radius: 0 
 
    } 
 
    .navbar-fixed-side .container, 
 
    .navbar-fixed-side .container-fluid { 
 
    width: auto; 
 
    padding-left: 0; 
 
    padding-right: 0 
 
    } 
 
    .navbar-fixed-side .navbar-header { 
 
    float: none 
 
    } 
 
    .navbar-fixed-side .navbar-brand { 
 
    height: auto 
 
    } 
 
    .navbar-fixed-side>.container .navbar-brand, 
 
    .navbar-fixed-side>.container-fluid .navbar-brand { 
 
    margin-left: 0 
 
    } 
 
    .navbar-fixed-side .navbar-collapse { 
 
    width: 100%; 
 
    border-top: 1px solid #e7e7e7 
 
    } 
 
    .navbar-fixed-side .navbar-nav { 
 
    float: none; 
 
    margin: 0 -15px 
 
    } 
 
    .navbar-fixed-side .navbar-nav>li { 
 
    float: none 
 
    } 
 
    .navbar-fixed-side .navbar-nav>li>a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-bottom: 1px solid #e7e7e7 
 
    } 
 
    .navbar-fixed-side .navbar-form { 
 
    margin: 0; 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    padding: 10px 15px; 
 
    border-bottom: 1px solid #e7e7e7 
 
    } 
 
    .navbar-fixed-side .navbar-text { 
 
    float: none; 
 
    margin-left: 0; 
 
    margin-right: 0 
 
    } 
 
    .navbar-fixed-side .navbar-left, 
 
    .navbar-fixed-side .navbar-right { 
 
    float: none !important 
 
    } 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    box-shadow: none; 
 
    border-bottom: 1px solid #e7e7e7 
 
    } 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu>li>a, 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu .dropdown-header { 
 
    padding: 5px 15px 5px 25px 
 
    } 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu>li>a { 
 
    line-height: 20px; 
 
    color: #777 
 
    } 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu>li>a:hover, 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu>li>a:focus { 
 
    background-image: none 
 
    } 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu>.active>a { 
 
    background-color: #e7e7e7; 
 
    color: #555 
 
    } 
 
    .navbar-fixed-side .navbar-nav>li>a:hover, 
 
    .navbar-fixed-side .navbar-nav>li>a:focus, 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu>li>a:hover, 
 
    .navbar-fixed-side .navbar-nav .dropdown-menu>li>a:focus { 
 
    background-color: #f0f0f0; 
 
    color: #333 
 
    } 
 
    .navbar-fixed-side .dropdown>.dropdown-toggle, 
 
    .navbar-fixed-side .dropdown-menu>.dropdown-header { 
 
    background-color: transparent !important; 
 
    color: #9d9d9d !important; 
 
    cursor: default; 
 
    font-size: 0.8em; 
 
    text-transform: uppercase; 
 
    border-bottom: none; 
 
    padding-bottom: 0 
 
    } 
 
    .navbar-fixed-side .dropdown-toggle .caret { 
 
    display: none 
 
    } 
 
    .navbar-fixed-side .dropdown-menu { 
 
    display: block 
 
    } 
 
    .navbar-fixed-side.navbar-inverse .navbar-collapse, 
 
    .navbar-fixed-side.navbar-inverse .navbar-nav>li>a, 
 
    .navbar-fixed-side.navbar-inverse .navbar-form, 
 
    .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu { 
 
    border-color: #363636 
 
    } 
 
    .navbar-fixed-side.navbar-inverse .divider { 
 
    background-color: #363636 
 
    } 
 
    .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>li>a { 
 
    color: #9d9d9d 
 
    } 
 
    .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>.active>a { 
 
    background-color: #090909; 
 
    color: #fff 
 
    } 
 
    .navbar-fixed-side.navbar-inverse .navbar-nav>li:not(.active)>a:hover, 
 
    .navbar-fixed-side.navbar-inverse .navbar-nav>li:not(.active)>a:focus, 
 
    .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>li:not(.active)>a:hover, 
 
    .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>li:not(.active)>a:focus { 
 
    background-color: #2f2f2f; 
 
    color: #fff 
 
    } 
 
    .navbar-fixed-side.navbar-inverse .dropdown>.dropdown-toggle { 
 
    color: #777777 !important 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-3 col-lg-2"> 
 
     <nav id="side-navbar" class="navbar navbar-default navbar-fixed-side"> 
 
      <div class="container"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
           <span class="sr-only">Toggle navigation</span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
          </button> 
 
       <a href="#"> 
 
           Brand Name 
 
          </a> 
 
      </div> 
 
      <div id="navbar" class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav navbar-font-family"> 
 
       <li><a href="#">Nav 1</a></li> 
 
       <li><a href="#">Nav 2</a></li> 
 
       <li><a href="#">Nav 3</a></li> 
 
       <li><a href="#">Nav 4</a></li> 
 
       <li><a href="#">Nav 5</a></li> 
 
       <li><a href="#">Nav 6</a></li> 
 
       <li><a href="#">Nav 7</a></li> 
 
       </ul> 
 
      </div> 
 
      <a align="center" href="#" class="hidden-xs push-to-bottom" style="background-color: red; color: black;"> 
 
          Hello! 
 
         </a> 
 
      </div> 
 
     </nav> 
 
     </div> 
 
     <div class="col-sm-9 col-lg-10"> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     <p>Hello World</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Answer 2

だけフレキシボックスシステムを使用しています。私はnavbarと赤いコンテナの周りにラッパーを作った。赤いボックスの絶対位置を削除してください！あなたはナビゲーションバーに1の-成長フレックスを与える場合は、簡単に非モバイル版のメディアクエリーで包み、互いから両容器（NAVと赤1）を割くことができますフレキシボックスシステムで

@media (min-width: 768px) { 
    #navWrapper { 
     height: 100vh; 
     display: flex; 
     flex-direction: column; 
     justify-content: space-between 
    } 

    #navbar { 
     flex-grow: 1; 
    } 
} 

.push-to-bottom { 
    height: 100px; 
    width: 100%; 
    flex-shrink: 0; 
} 

それはあなたのデザインを粉砕するでしょう！赤いボックスは、高さを100pxに保つためにflex-shrink: 0になります！

htmlコード（重要なスニペット）

<div id="navWrapper" class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#">Brand Name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-font-family"> 
      <li><a href="#">Nav 1</a></li> 
      <li><a href="#">Nav 2</a></li> 
      <li><a href="#">Nav 3</a></li> 
      <li><a href="#">Nav 4</a></li> 
      <li><a href="#">Nav 5</a></li> 
      <li><a href="#">Nav 6</a></li> 
      <li><a href="#">Nav 7</a></li> 
     </ul> 
    </div> 
    <div align="center" class="hidden-xs push-to-bottom" style="background-color: red; color: black">Hello!</div> 
</div> 

ワーキングサンプル： https://jsfiddle.net/545cdqb2/8/