1. ホーム
  2. 質問と答え
  3. ブートストラップCSS - モバイルメニューAndroidで動作しない高さ100％

ブートストラップCSS - モバイルメニューAndroidで動作しない高さ100％

2017-11-21 13 views
1

私は4つのメニュー項目を持つブートストラップメニューを持っています。これらの各項目にはドロップダウンメニューがあります。私は、次の手順を実行して、メニューには、100％の高さになってもらうことができました：ブートストラップCSS - モバイルメニューAndroidで動作しない高さ100％

.navbar-collapse { 
    height: 100vh; 
} 

.dropdown-menu { 
    position:relative; 
}

しかし、Androidモバイルデバイス上で、これは動作しません - あなたはスクロールダウンした場合には、切断されます、あなたが行けば上にスクロールすると、途切れることもあります。誰でも助けることができますか？ Bootstrapモバイルメニューを高さ100％にし、すべてのモバイルプラットフォームで正しくスクロールできるようにするにはどうすればよいですか？ここで

は、ドロップダウンメニューのコードです：

<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> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> 
      <div class="dropdown-menu dropdown-communities" role="menu"> 
      <div class="row current-communities"> 
       <div class="col-md-4"> 
       <h4>Option</h4> 
       <ul> 
        <li><a href="/Link/">Link</a></li> 
       </ul> 
       </div> 
       <div class="col-md-4"> 
       <h4>Option</h4> 
       <ul> 
        <li><a href="/Link/">Link</a></li> 
        <li><a href="/Link/">Link</a></li> 
        <li><a href="/Link/">Link</a></li> 
       </ul> 
       </div> 
       <div class="col-md-4"> 
       <h4>Option</h4> 
       <ul> 
        <li><a href="/Link/">Link</a></li> 
        <li><a href="/Link/">Link</a></li> 
        <li><a href="/Link/">Link</a></li> 
        <li><a href="/Link/">Link</a></li> 
        <li><a href="/Link/">Link</a></li> 
        <li><a href="/Link/">Link</a></li> 
       </ul> 
       </div> 
      </div> 
      <hr class="current-communities-hr" /> 
      <div class="row upcoming-communities"> 
       <div class="col-md-4"> 
       <h4>Option</h4> 
       <ul> 
        <li><a href="/Link/">Link</a></li> 
       </ul> 
       </div> 
       <div class="col-md-4"> 
       <h4>Option</h4> 
       <ul> 
        <li><a href="/Link/">Link</a></li> 
       </ul> 
       </div> 
       <div class="col-md-4"> 
       <h4>Option</h4> 
       <ul> 
        <li><a href="/Link/">Link</a></li> 
       </ul> 
       </div> 
      </div> 
      </div> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      <li><a href="/Link/">Link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div>

出典

2017-11-21 user979331

答えて

3

まあ、ウェブサイトを見た後には、そのOPの問題は、ナビゲーションバーがなく、サブメニューのglichingと、100％の高さを取っていない私には思えます。

は、溶液1 をグリッチグリッチの理由は、実際にmargin-right: -15px; margin-left: -15px;は、おそらくいくつかのオーバーフローのルールと競合するブートストラップ.rowルールです。だから、簡単な修正は次のようになります。

ソリューション2グリッチ 
.dropdown-communities .row{ 
    margin: 0; 
}

：（私の前の回答から）モバイル上navebar 100％の高さを作るために

.dropdown-communities { 
    /*overflow-y: hidden; <= REMOVE THIS rule. Should solves the glitching*/ 
}

を：

.navbar-collapse { 
    height: 90vh; /* Set to lower value, because 
        height = <total height> - <.navbar-header height> 
        so you will not lose the last menu */ 
    max-height: 100vh!important; /* Or max-height: none!important; */ 
}
ここでは210

モバイルデバイス上で100％の高さを得ることからあなたを防ぐため、ブートストラップCSSルールです：https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L4217-L4226

私は（それが6Kラインからわずか2 CSSルールにそれを絞り込むためにいくつかの時間がかかった問題を修正してくださいしてみましょうコンテンツページのスクロールやメニュースクロール

  • あなたは下へ、1番目のメニューやスクロールメニューを開くと、あなたがスクロールするまで、サブメニューが見えない滞在：CSSの2巻の巻物があり

    • ）以下のデモコードを参照してくださいメインのコンテンツページがスクロールします。
    • ページの下部（またはスクロールページの内容）に達すると、そのページが表示されます。

    • しかし、上にスクロールすると、最初の部分が見えなくなります。

      下にスクロールする必要はありません。ページの内容をスクロールして強制的に再描画し、サブメニューを表示させるだけです。ここで

    は、問題のデモです：一緒にプレイする

    enter image description here

    ソースコード...（モバイルまたは中のクロムはCtrl + Shiftキー+ M上チェック）

    <!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
    <title>Home</title> 
 
    <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.6/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $(".dropdown").hover(function() { 
 
       $(this).addClass("open") 
 
      }, function() { 
 
       $(this).removeClass("open") 
 
      }) 
 
     }); 
 

 
    </script> 
 

 
    <style type="text/css"> 
 
     .navbar-collapse { 
 
      height: 100vh; 
 
     } 
 

 
     .dropdown-communities { 
 
      overflow-y: hidden 
 
     } 
 
    </style> 
 

 
</head> 
 
<body> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Home</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse in" aria-expanded="true" style=""> 
 
      <ul class="nav navbar-nav"> 
 

 
       <li class="dropdown"> 
 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" 
 
         aria-expanded="true"> 
 
         SECTION 1 
 
        </a> 
 
        <div class="dropdown-menu dropdown-communities" role="menu"> 
 
         <div class="row current-communities"> 
 
          <div class="col-md-4"> 
 
           <h4>SUB-SECTION 1</h4> 
 
           <ul> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
           </ul> 
 
          </div> 
 
          <div class="col-md-4"> 
 
           <h4>SUB-SECTION 2</h4> 
 
           <ul> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
           </ul> 
 
          </div> 
 
          <div class="col-md-4"> 
 
           <h4>SUB-SECTION 3</h4> 
 
           <ul> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
            <li><a href="#">Link</a></li> 
 
           </ul> 
 
          </div> 
 
         </div> 
 

 
         <hr class="current-communities-hr"> 
 

 
         <div class="row upcoming-communities"> 
 
          <div class="col-md-4"> 
 
           <h4>HEADER 1</h4> 
 
           <ul> 
 
            <li><a href="#">Link</a></li> 
 
           </ul> 
 
          </div> 
 
          <div class="col-md-4"> 
 
           <h4>HEADER 2</h4> 
 
           <ul> 
 
            <li><a href="#">Link</a></li> 
 
           </ul> 
 
          </div> 
 
          <div class="col-md-4"> 
 
           <h4>HEADER 3</h4> 
 
           <ul> 
 
            <li><a href="#">Link</a></li> 
 
           </ul> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </li> 
 
       <li class="dropdown"> 
 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
         SECTION 2 
 
        </a> 
 
        <ul class="dropdown-menu" role="menu"> 
 
         <li><a href="#">Link 1</a></li> 
 
         <li><a href="#">Link 2</a></li> 
 
         <li><a href="#">Link 3</a></li> 
 
         <li><a href="#">Link 4</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="dropdown"> 
 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
         SECTION 3 
 
        </a> 
 
        <ul class="dropdown-menu" role="menu"> 
 
         <li><a href="#">Link 1</a></li> 
 
         <li><a href="#">Link 2</a></li> 
 
         <li><a href="#">Link 3</a></li> 
 
         <li><a href="#">Link 4</a></li> 
 
        </ul> 
 
       </li> 
 

 
       <li class="dropdown"> 
 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
         SECTION 4 
 
        </a> 
 
        <ul class="dropdown-menu" role="menu"> 
 
         <li><a href="#">Link 1</a></li> 
 
         <li><a href="#">Link 2</a></li> 
 
         <li><a href="#">Link 3</a></li> 
 
         <li><a href="#">Link 4</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<div style="height: 100px">Content 1</div> 
 
<div style="height: 100px">Content 2</div> 
 
<div style="height: 100px">Content 3</div> 
 
<div style="height: 100px">Content 4</div> 
 
<div style="height: 100px">Content 5</div> 
 
<div style="height: 100px">Content 6</div> 
 
<div style="height: 100px">Content 7</div> 
 
<div style="height: 100px">Content 8</div> 
 
<div style="height: 100px">Content 9</div> 
 
</body>

    • 出典

    2017-11-24 06:21:10 varren

    +0

    この解決策は私のウェブサイトでは機能しませんでした....私はURLであなたにメッセージを送信できますか？見てみることはできますか？ – user979331

    +0

    @ user979331ここに表示したくない場合や、ここでデモを投稿したくない場合は誰でも見ることができるように、私のメールvarren @ gmailに送信してください。 – varren

    +0

    素晴らしいです！私はちょうど – user979331

    1

    私はここでの問題のチェックなど.navbar-collapseためmax-height値があることが判明：

    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { 
    max-height: 340px; 
}
    は、

    これは、ビューポートの高さに合わせてメニューを表示できない問題です。次のコードは、このルールを無効にするのに役立ちます。

    .navbar-collapse, 
.navbar-fixed-top .navbar-collapse { 
    max-height: none!important; 
}

    このルールはmediaqueriesで異なる値を持っているがため、!importantを使用してください。

    https://jsfiddle.net/gyz357fL/

    あなたはまだ問題がある場合、私はあなたのURLを見てみましょうし、特定の問題をチェックしますしてください。

    出典

    2017-11-25 04:36:02

    関連する問題

     関連する問題