Fullscreen Canvas with bootstrap

by nockawa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
  	<div class="navbar-header">
    	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      	<span class="sr-only">Toggle navigation</span>
      </button>
     	<a asp-controller="Home" asp-action="Index" class="navbar-brand">My Site</a>
    </div>
  </div>
</nav>

<div class="container">
  <div class="page-header row">
    <h1>Babylon JS Rocks !</h1>
		<div id="renderZone">
			<canvas id="renderCanvas"></canvas>
		</div>
  </div>  
</div>

<div class="navbar navbar-fixed-bottom">
	<hr class="separator" />
	<footer>
		<p>My site, copyright nobody</p>
	</footer>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

#renderZone {
	width: 100%;
	height: 100%;
	background: #44a;
}

#renderCanvas{
	background: #a44;
	opacity: 0.4;
	width: 100%;
	height: 100%;
	
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */