gregersrygg/flexbox.html

## flexbox.html
<!doctype html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, width=device-width"/>
    <style>

        html, body {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        header {
            height: 100px;
            width: 100%;
            background-color: red;
        }

        section {
            -webkit-box-flex: 1;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
        }

        nav {
            width: 200px;
            background-color: yellow;
        }

        article {
            -webkit-box-flex: 1;
            background-color: blue;
        }

        article.green {
            background-color: green;
        }

    </style>
</head>
<body>
<header></header>
<section id="main">
    <nav>

    </nav>
    <article>
        <ul id="sizelist"></ul>
    </article>
</section>
<script>
(function(){
    var sizeList = document.getElementById("sizelist");
    window.onresize = function() {
        var li = document.createElement("li"), date = new Date();
        li.appendChild(document.createTextNode(""
            + date.toLocaleTimeString()
            + ":"
            + date.getMilliseconds()
            + " innerHeight=" +window.innerHeight));
        sizeList.appendChild(li);
    }
})();
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, width=device-width"/>
	<style>

	html, body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	height: 100%;
	margin: 0px;
	padding: 0px;
	}

	header {
	height: 100px;
	width: 100%;
	background-color: red;
	}

	section {
	-webkit-box-flex: 1;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	}

	nav {
	width: 200px;
	background-color: yellow;
	}

	article {
	-webkit-box-flex: 1;
	background-color: blue;
	}

	article.green {
	background-color: green;
	}

	</style>
	</head>
	<body>
	<header></header>
	<section id="main">
	<nav>

	</nav>
	<article>
	<ul id="sizelist"></ul>
	</article>
	</section>
	<script>
	(function(){
	var sizeList = document.getElementById("sizelist");
	window.onresize = function() {
	var li = document.createElement("li"), date = new Date();
	li.appendChild(document.createTextNode(""
	+ date.toLocaleTimeString()
	+ ":"
	+ date.getMilliseconds()
	+ " innerHeight=" +window.innerHeight));
	sizeList.appendChild(li);
	}
	})();
	</script>
	</body>
	</html>