Question

正如标题所说，我的网页上没有显示滚动条的问题。关于堆栈溢出，我已经看过类似的问题，而且我没有其他一些常见的问题，比如overflow：hidden。我认为这是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;
}

抱歉延迟，这是小提琴 http://jsfiddle.net/ryyanj/us9undLf/

Answer 1

假设您指的是从页面底部开始的表格......

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

position:fixed使你的元素＆＃34;浮动＆＃34; - 它相对于浏览器窗口而不是内容定位。因为这样做不会扩展内容以便创建滚动条，即使它确实滚动了内容，而不是窗口。

由于您没有提及为什么表格已修复，我只能假设它将页面空间缩小了50％，在这种情况下，您的问题可以通过切换来解决：

position:fixed至position:absolute

#table1的CSS将是：

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

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

1 个答案: