我正在构建的网页上没有滚动条

Question

如标题所述，我遇到了网页上没有显示滚动条的问题。我在堆栈溢出上查看了与此类似的问题，但我没有其他一些常见问题，例如溢出：隐藏。我认为这是 bootstrap 的问题，但我注释掉了 bootstrap CSS 的所有链接，但我仍然没有看到滚动条。我还添加了溢出：滚动到我的 CSS 文件，虽然出现了滚动条，但它仍然没有用。我的代码如下，如有任何帮助，我们将不胜感激。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    `<title>Cosmic Bowling!!!</title>`

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="css/homepage.css" rel="stylesheet">

  </head>

  <body>

  <div id="banner"></div>

  <table class="score-table" id="table1">
    <thead>

      <th>FR</th>
      <th>RD</th>
      <th>SCORE</th>
    </thead>
    <tbody>
      <tr>
          <td class="_frameCol">1</td>
          <td class="_roundCol">
            <div class="big_div">
              <div class="_roll">
                <p>cat</p>
              </div>

              <div class="_roll">
                <p>cat</p>
              </div>
            </div>
          </td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">2</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">3</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">4</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">5</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">6</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">7</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">8</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">9</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
      <tr>
          <td class="_frameCol">10</td>
          <td class="_roundCol"></td>
          <td class="_scoreCol"></td>
      </tr>
    </tbody>
  </table>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
  </body>
</html>

和 CSS 文件

    body 
{
    background-image: url("images/stardust.png");
}

th
{
    padding: 10px;
    text-align: center;
}

#banner
{
    /*position:fixed;*/
    background-image: url("images/bowling_banner.jpg");
    background-position: center;
    width: 100%;
    height: 10%;
}

#table1
{
    /*positioning*/
    position: fixed;
    top: 50%;
}
.score-table,th,tr,td
{
    border: 1px solid white;
    border-width: 2px;
    color: white;

}

._frameCol
{
    text-align: center;

}

._roundCol
{
    height: 50px;
    width: 90px;
}

._scoreCol
{
    width: 10px;
}

._roll
{
    display: inline-block;
    background-color: yellow;
    position: relative;

}

.big_div
{
    height: 100%;
    background-color: red;
}

抱歉耽搁了，这里是fiddle http://jsfiddle.net/ryyanj/us9undLf/

Answer 1

假设您指的是 table 离开页面底部...

这是因为 #table1 CSS（在 css/homepage.css），更具体地说 position:fixed

position:fixed 使您的元素 "float" - 它相对于浏览器 window 而不是内容定位。因为这不会扩展内容来创建滚动条，即使它这样做了，你也会滚动 content，而不是 window.

因为你没有提到 table 被修复的原因，我只能假设它 space 它在页面下方 50%，在这种情况下，你的问题可以通过切换来纠正：

position:fixed 到 position:absolute

#table1 的 CSS 将是：

#table1
{
    /*positioning*/
    position: absolute;
    top: 50%;
}

我正在构建的网页上没有滚动条

No Scroll bar on webpage I am building

html

css

scroll

twitter-bootstrap