Question

我点击导航栏中的按钮时会显示div。 div的高度大于视口/页面。我想在显示div时为页面启用滚动。

我尝试使用overflow: scroll，但它没有用。滚动应用于内部div，按钮单击显示，但我想在单击时应用于页面。我该如何工作？

此处的Plunker：https://plnkr.co/edit/JzGCix39dSd1q7KOiNTc?p=preview

代码：

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#" id="showKoo" onclick="showKoo()">Tool bar</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="mainBorder topcorner complete_width complete_height" id="box" style="display: block; background-color:red">
      <h4> SOME CONTENT</h4>
    </div>
  </body>

的CSS：

body{
  overflow: scroll;
}

.centered_div{
    margin: 0 auto;
}

.mainBorder{
    border: 1px #B2B9BA solid;
    overflow:scroll;
}

.topcorner{
    position:fixed;
    top:41px;
    right:30px;
}

.complete_width {
    min-width: 360px;
    max-width: 360px;
}

.complete_height {
    min-height:640px;
    max-height:640px;
}

JS：

function showKoo() {
    $('#box').toggle();
}

Answer 1

没有必要提到身体溢出。它会根据内容附加滚动。

尝试位置：绝对而非固定。

// Code goes here

function showKoo() {
    $('#box').toggle();
}

/* Styles go here */


body{
  position:relative;
}

.centered_div{
    margin: 0 auto;
}

.mainBorder{
    border: 1px #B2B9BA solid;
    
}

.topcorner{
    position:absolute;
    top:41px;
    right:30px;
}

.complete_width {
    min-width: 360px;
    max-width: 360px;
}

.complete_height {
    min-height:640px;
    max-height:640px;
}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#" id="showKoo" onclick="showKoo()">Tool bar</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="mainBorder topcorner complete_width complete_height" id="box" style="display: block; background-color:red">
      <h4> SOME CONTENT</h4>
    </div>
  </body>

</html>

Answer 2

Body通常会占用其内容的高度。除非你弄乱任何子元素的定位。

在这种情况下，由于“.topcorner”，你的盒子有“position：fixed”。

这会将其从正常的文档流中弹出，导致身体不考虑它的高度。

你真的需要位置：固定在那个元素上？

如何启用单击按钮时显示的div的滚动

2 个答案: