Why can't I scroll down in my HTML document?

Question

0.00/5 (No votes)

See more:

For some reason I can't scroll down when my HTML overflows. Please help. Thanks. Here is my code.

HTML

<html>
  <head>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
    <link href='style.css' rel='stylesheet'>

  </head>
<style>
/* Initial body */
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
  color: white;
  background-color: black;
}

/* Basic styling */

.jumbotron {
    height: 100%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #FFA500;
}

.icon-menu i {
  margin-right: 5px;
}
</style>
  <body>

    <div class="menu">
      
      <!-- Menu icon -->
      <div class="icon-close">
     <h3 style="color: white;">BACK</h2>
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">Scouts</a></li>
        <li><a href="#">Duty Rooster</a></li>
        <li><a href="#">Meal Plan</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

    <!-- Main body -->
    <div class="jumbotron">

      <div class="icon-menu">
<br>
<h1 style="background-color: #FFA500; color: white;">     ☰          Scout Logs</h1>
<br>         
      </div>
<a href="SCOUT ONE URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 1
    </button>
</a><a href="SCOUT TWO URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 2
    </button>
</a><a href="SCOUT THREE URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 3
    </button>
</a><a href="SCOUT FOUR URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 4
    </button>
</a><a href="SCOUT FIVE URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 5
    </button>
</a><a href="SCOUT SIX URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 6
    </button>
</a><a href="SCOUT SEVEN URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 7
    </button>
</a><a href="SCOUT EIGHT URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 8
    </button>
</a><a href="SCOUT NINE URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 9
    </button>
</a><a href="SCOUT TEN URL">
    <button style="color: white; background-color: black; width: 100%; margin: 10px; padding: 30px;">
        Scout 10
    </button>
</a>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
<script>
var main = function() {
  /* Push the body and the nav over by 285px over */
  $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);
</script>
  </body>
</html>

Posted 22-Aug-15 18:00pm

Member 11928450

Add a Solution

Comments

[no name] 23-Aug-15 2:11am

Thanks it worked. :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shmuel Zang · Answer 1 · 2015-08-22T18:44:00

Solution 1

That's because you set the body's overflow property to hidden. Try to set it to auto or, remove it (to apply the default value).

Posted 22-Aug-15 18:44pm

Shmuel Zang

Updated 22-Aug-15 18:48pm

v2