Why I can't scroll down on my page - html

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">
<span class="fa fa-bars"></span>test
</div>
<nav>
<ul>
<li><span class="fa fa-home"></span>Admin dashboard</li>
<li style="float:right"><span class="fa fa-sign-out"></span>Loguit</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>© 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 */
}

Answer 2

you might need to reset the overflow-x to hidden html{ overfloq-x:hidden; }