Why I can't scroll down on my page

Question

I can't scroll down on my page, i have looked for the overflow property to change it from hidden to scroll but its still not working.

I hope someone can help me with this frustrating problem... I have pasted all my css files in the overflow editor so you guys can see what is going wrong.

Here is my source code:

 body { font-family: sans-serif; font-size: 16px; font-weight: 400; overflow: scroll; } div.gallery1 { border: 5px solid #2f354e; border-radius: 10px; width: 300px; background: #17c; } div.table-title { display: block; max-width: 600px; padding:5px; width: 100%; } .table-title h3 { color: #000; font-size: 30px; font-weight: 400; font-style: normal; font-family: Helvetica, arial, sans-serif; text-transform: uppercase; } .table-fill { background: white; border-radius:3px; border-collapse: collapse; height: 320px; max-width: 600px; padding:5px; width: 100%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); animation: float 5s infinite; } th { color:#D5DDE5; background:#1b1e24; border-bottom:4px solid #9ea7af; border-right: 1px solid #343a45; font-size:23px; font-weight: 100; padding:24px; text-align:left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; } th:first-child { border-top-left-radius: 3px; } th:last-child { border-top-right-radius: 3px; border-right: none; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color:#666B85; font-size:16px; font-weight:normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); } tr:hover td { background:#4E5066; color:#FFFFFF; border-top: 1px solid #22262e; } tr:first-child { border-top:none; } tr:last-child { border-bottom:none; } tr:last-child td:first-child { border-bottom-left-radius:3px; } tr:last-child td:last-child { border-bottom-right-radius:3px; } td { background:#FFFFFF; padding:20px; text-align:left; vertical-align:middle; font-weight:300; font-size:18px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1; } td:last-child { border-right: 0px; } th.text-left { text-align: left; } th.text-center { text-align: center; } th.text-right { text-align: right; } td.text-left { text-align: left; } td.text-center { text-align: center; } td.text-right { text-align: right; } /**********************/ body { margin: 0; padding: 0; /* Location of the image */ background-image: url("http://kb4images.com/images/red-wallpaper-hd/37940982-red-wallpaper-hd.jpg"); /* Background image is centered vertically and horizontally at all times */ background-position: center center; /* Background image doesn't tile */ background-repeat: no-repeat; /* Background image is fixed in the viewport so that it doesn't move when the content's height is greater than the image's height */ background-attachment: fixed; /* This is what makes the background image rescale based on the container's size */ background-size: cover; /* Set a background color that will be displayed while the background image is loading */ background-color: #464646; } h1 { color: white; } p { font-family: Impact, Charcoal, sans-serif; font-size: 20px; } /**********************/ /*------Nav-------*/ header { width:100%; position: fixed; } header nav { width:100%; background:#2f354e; } .menu_bar { display:none; } header nav ul { overflow:hidden; list-style:none; margin: 0px; padding: 0px; } header nav ul li { float:left; } header nav ul li a { color:#fff; padding:14px; display:block; text-decoration:none; } header nav ul li span { margin-right:10px; } header nav ul li a:hover { background:red; text-decoration: none; color:#ffffff; } @media screen and (max-width:800px ) { header nav { width:150px; height:100%; left:-100%; margin:0px; position: fixed; } header nav ul li { display:block; float:left !important } .menu_bar { display:block; width:100%; background:#ccc; text-align:center; } .menu_bar .bt-menu { display:block; padding:20px; background:#2f354e; color:#fff; text-decoration:none; font-weight: bold; font-size:25px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .menu_bar span { float:right; font-size:30px; } } /*--------End of the nav-------*/ /*-------- Generic styles-------*/ body{ overflow: scroll; margin:0px; font-family: sans-serif; } /*-------- Generic styles-------*/ body { color: #fff; } footer { background: #2f354e; bottom: 0; left: 0; padding: 20px 0; position: fixed; right: 0; text-align: center; } 

 <!DOCTYPE html> <html> <title>test</title> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" type="image/png" href="favicon/popcorn-32.png"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/loader.css"> <link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/filmtoevoegen.css"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> <script src="js/loader.js"></script> </head> <body> <header> <div class="menu_bar"> <a href="#" class="bt-menu"><span class="fa fa-bars"></span>test</a> </div> <nav> <ul> <li><a href="adminindex.php"><span class="fa fa-home"></span>Admin dashboard</a></li> <li style="float:right"><a href="logout.php"><span class="fa fa-sign-out"></span>Loguit</a></li> </ul> </nav> </header> <br> <br> <br> <br> <br> <center> <div class="gallery1"> <h3>Film toevoegen</h3> </div> <br> <br> <table class="table-fill"> <thead> <tr> <th class="text-left">Film:</th> <th class="text-left">Sales</th> </tr> </thead> <tbody class="table-hover"> <tr> <td class="text-left">Genre:</td> <td class="text-left">$ 50,000.00</td> </tr> <tr> <td class="text-left">Film omschrijving:</td> <td class="text-left">$ 10,000.00</td> </tr> <tr> <td class="text-left">Datum van uitkomst:</td> <td class="text-left">$ 85,000.00</td> </tr> <tr> <td class="text-left">Datum uit bioscoop:</td> <td class="text-left">$ 56,000.00</td> </tr> <tr> <td class="text-left">Film draai dagen:</td> <td class="text-left">$ 98,000.00</td> </tr> <tr> <td class="text-left">Zaal:</td> <td class="text-left">$ 98,000.00</td> </tr> <tr> <td class="text-left">Film afbeelding:</td> <td class="text-left">$ 98,000.00</td> </tr> </tbody> </table> </center> <footer>&copy; Copyright test</footer> </body> </html> 

Answer 1

Your footer is positioned with fixed position, that's why it is overlapping with your content of body.

In case of setting position fixed for header/footer, make sure to set padding of the body in top/bottom respectively.

So in this case setting the padding-bottom of the body to the height of the footer will make the content visible.

add below css line to your body tag.

body {
padding-bottom:58px; /* height of the footer */
}