I'm experiencing an issue with my footer getting stuck in the middle of the page. Strangely, this problem only occurs on one specific page, and not on any other pages.
I've tried various methods to fix it, but none of them have been successful. I'm running out of ideas.
Any assistance would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- fortawesome cdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src = "logo.png" alt = "logo"> </a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="watch.html">Watch</a></li>
<li><a href="index.html">Heros</a></li>
<li><a href="index.html">Stats</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<hr>
<div class = "container">
<div class="row">
<div class="col-sm-8"> <div class = "TwitchPlayer">
<iframe id="player"
src="http://www.twitch.tv/starladder1/embed" >
</iframe>
</div></div>
<div class="col-sm-4"><div class = "twitchChat">
<iframe id="chat_embed" src="http://www.twitch.tv/starladder1/chat"></iframe>
</div>
</div>
</div>
</div>
<div class="panel panel-footer">
<div class="panel-body"><div class="footerRow-row">
<div class="col-sm-4"> <a href = "" class="btn btn-social-icon btn-lg btn-linkedin" target="_blank">
<span class="fa fa-linkedin fa-2x"></span>
</a></div>
<div class="col-sm-4"><script type="text/javascript">
document.write(new Date().getFullYear());
</script><p>© </p></div>
<div class="col-sm-4"><a href = "" class="btn btn-social-icon btn-lg btn-github" target="_blank">
<span class="fa fa-github fa-2x"></span>
</a></div>
</div>
</div>
</div>
</body>
</html>