Question

我是开发使用bootstrap框架的新手，我遇到了无法解决的问题。

我需要创建由两部分组成的页面：导航部分，内容部分。内容部分应该是可滚动的，它包含一些生成的数据（javascript），所以这里是代码：

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: 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

请指出正确的解决方案。

Answer 1

根据评论进行编辑：

设置.nav fixed：

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap问题，下拉菜单隐藏在另一个元素

1 个答案: