No Scroll bar on webpage I am building

As the title says I am having the issue of no scroll bar showing up on my web page. I have viewed similar questions to this one on stack overflow and I don't have some of the other common issues such as overflow: hidden. I thought it was a problem with bootstrap but I commented out all off the links to bootstrap CSS and I still dont get a scroll bar. I also added overflow: scroll to my CSS file and while a scroll bar showed up it still didnt work. My code is below and any help would be greatly appreciated.

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

and the CSS file

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

Sorry for the delay, here is the fiddle http://jsfiddle.net/ryyanj/us9undLf/

Answers


Assuming you're referring to the table going off the bottom of the page...

This is because of the #table1 CSS (in css/homepage.css), more specifically position:fixed

position:fixed is makes your element "float" - it is positioned relative to the browser window rather than the content. Because of this is won't expand the content so as to create scroll bars, even if it did you would be scrolling the content, not the window.

Since you didn't mention why the table was fixed I can only assume it's to space it 50% down the page, in which case your problem can be rectified by switching:

position:fixed to position:absolute

The CSS for #table1 would then be:

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

Need Your Help

How do I pass along variable in a custom control?

c# constructor visual-studio-express

I've created a custom control in C# in VSE, and it appears on the list on the left. But I want to pass along a reference to my main form, and I'm currently doing so in the constructor. And then I've

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.