引導問題，下拉菜單隱藏在另一個元素後面

我是使用引導框架開發的新手，我遇到了無法解決問題的問題。引導問題，下拉菜單隱藏在另一個元素後面

我需要創建由兩部分組成的頁面：導航部分，內容部分。內容部分應該是滾動的，它由一些生成的數據（JavaScript的），所以這裏是代碼：

function loaddata() { 
 
"use strict"; 
 
var i, divMain, divContent; 
 
divMain = document.getElementById("data"); 
 
\t for (i = 0; i < 100; i += 1) 
 
    { 
 
    \t divContent = document.createElement("div"); 
 
    divContent.setAttribute("id", "div_content" + i); 
 
    divContent.innerHTML += "Some data " + i; 
 
    divMain.appendChild(divContent); 
 
    } 
 
}

html, body 
 
{ 
 
    overflow-y: hidden; 
 
} 
 
#data 
 
{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 95%; 
 
    overflow-y: scroll; 
 
}

<script src="https://code.jquery.com/jquery-2.2.3.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<body onload="loaddata()"> 
 
    <div class="nav"> 
 
    <div class='btn-group' role='group' aria-label='...'> 
 
     <button class='btn btn-default'>Button 1</button> 
 
     <button class='btn btn-default'>Button 2</button> 
 
     <div class='btn-group'> 
 
      <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Button 3</button> 
 
      <ul class='dropdown-menu'> 
 
      <li><input type='checkbox' checked>Value 1</li> 
 
      <li><input type='checkbox' checked>Value 2</li> 
 
      <li><input type='checkbox' checked>Value 3</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div>Some text..............................................</div> 
 
    <div>Some text..............................................</div> 
 
    </div> 
 
    <div id="data"> 
 
    </div> 
 
</body>

我能夠通過改變位置來解決與隱藏下拉問題數據div的屬性不固定或絕對，但在這種情況下數據不可滾動。

Fiddle

請點我正確的解決方案。

來源

2017-01-26 DKay

請問您的導航必須始終可見？下拉被阻止的原因是因爲它下面的div有位置：絕對。這個CSS規則所做的就是將它從html的正常流程中移除並放置在其他元素的頂部。換句話說，您的下拉列表的頂部。 –

此外，我無法使用上面的代碼在Chrome中滾動內滾動條。頂部窗口的外部滾動條雖然工作。 –

編輯基於評論：

設置.navfixed：

function loaddata() { 
 
    "use strict"; 
 
    var i, divMain, divContent; 
 
    divMain = document.getElementById("data"); 
 
    for (i = 0; i < 100; i += 1) { 
 
    divContent = document.createElement("div"); 
 
    divContent.setAttribute("id", "div_content" + i); 
 
    divContent.innerHTML += "Some data " + i; 
 
    divMain.appendChild(divContent); 
 
    } 
 
}

html, 
 
body { 
 
    overflow-y: auto; 
 
} 
 
#data { 
 
    margin-top: 40px; 
 
    width: 100%; 
 
    height: 95%; 
 
    /*overflow-y: scroll;*/ 
 
} 
 
.nav { 
 
    position: fixed; 
 
}

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

 
<body onload="loaddata()"> 
 
    <div class="nav"> 
 
    <div class='btn-group' role='group' aria-label='...'> 
 
     <button class='btn btn-default'>Button 1</button> 
 
     <button class='btn btn-default'>Button 2</button> 
 
     <div class='btn-group'> 
 
     <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Button 3</button> 
 
     <ul class='dropdown-menu'> 
 
      <li> 
 
      <input type='checkbox' checked>Value 1</li> 
 
      <li> 
 
      <input type='checkbox' checked>Value 2</li> 
 
      <li> 
 
      <input type='checkbox' checked>Value 3</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="data"> 
 
    </div> 
 
</body>

來源

2017-01-26 14:19:38 Syden

導航部分（按鈕）不應滾動，所以這不是正確的解決方案。無論如何，感謝您的評論。 – DKay

我懷疑是@Syden。你有兩個滾動條，你用導航欄隱藏數據div中的文本。 –

@Syden在鉻上表現不錯，我會讚不絕口。 –

引導問題，下拉菜單隱藏在另一個元素後面

回答

相關問題