JSFiddle - React, Tailwind, and code Playground
HTML
<div id="viewArea">
<div id="top"></div>
<div id="content">
<div id="left"></div>
<div id="right">
<img id="flexiIMG" src="http://generationsinc.co.uk/test/f/1.jpg" alt="awesome picture" width="0" height="0" />
</div>
</div>
</div>
CSS
* {
padding:0;
margin:0;}
#top {
display:block;
width:100%;
height:30px;
background:#cf0;}
#content {
display:block;
width:100%;}
#left {
display:block;
width:200px;
float:left;
background:#f30;}
#right {
float:left;}
JavaScript
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback, element) {
window.setTimeout(callback, 1000 / 30);
};
})();
// Sets up the timer.
function Timer() {
this.gameTime = 0;
this.maxStep = 0.05;
this.wallLastTimestamp = 0;
};
// How much time occurred between the last time the function ran and now.
Timer.prototype.tick = function () {
var wallCurrent = Date.now();
var wallDelta = (wallCurrent - this.wallLastTimestamp) / 1000;
this.wallLastTimestamp = wallCurrent;
//Includes a margin of 0.05 seconds.
var gameDelta = Math.min(wallDelta, this.maxStep);
this.gameTime += gameDelta;
return gameDelta;
};
var timer = new Timer();
var totalAnim = 0;
var lastAnim = 0;
function animTimer() {
lastAnim = timer.tick();
totalAnim += lastAnim;
};
function contentAreaHeight() {
requestAnimFrame(contentAreaHeight);
animTimer();
var topHeight = $('#top').outerHeight(true);
var contentHeight = $(window).outerHeight() - topHeight;
var rightWidth = $(window).outerWidth() - $('#left').outerWidth();
var windowWidth = $(window).outerWidth();
var windowHeight = $(window).outerHeight();
$('#content').css({
height : contentHeight+'px'
});
$('#left').css({
height : contentHeight+'px'
});
$('#right').css({
height : contentHeight+'px',
width : rightWidth+'px'
});
$('#flexiIMG').attr({
height : contentHeight+'px',
width : rightWidth+'px'
});
$('#viewArea').css({
width: windowWidth+'px',
height: windowHeight+'px',
overflow: 'hidden'
});
};
contentAreaHeight();