shanechin/index.html

## index.html
<html>
  <body>
     <header>header</header>
     <main id="main">main</main>
    <footer>footer</footer>
  </body>
</html>

## scratchpad.markdown

      
    Raw
  

              scratchpad.markdown
            
          
    Scratchpad

A Pen by Shane Chin on CodePen.
License.

  
## script.js
var words =["The sky", "above", "the port","was", "the color of television", "tuned", "to", "a dead channel", ".", "All", "this happened", "more or less","." ,"I", "had", "the story", "bit by bit", "from various people", "and", "as generally", "happens", "in such cases", "each time", "it", "was", "a different story","." ,"It", "was", "a pleasure", "to", "burn"];
var text = [];
var x = 8000;
while(--x) text.push(words[Math.floor(Math.random() * words.length)]);
main = document.getElementById('main')
main.innerHTML= text.join(" ")

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.scss
html {
  height: 100%
}
body{
  height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex-grow:1;
  overflow: scroll;
}
header, footer {
  height: 100px;
  border: 1px solid gold;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

## styles
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
	<html>
	<body>
	<header>header</header>
	<main id="main">main</main>
	<footer>footer</footer>
	</body>
	</html>
	var words =["The sky", "above", "the port","was", "the color of television", "tuned", "to", "a dead channel", ".", "All", "this happened", "more or less","." ,"I", "had", "the story", "bit by bit", "from various people", "and", "as generally", "happens", "in such cases", "each time", "it", "was", "a different story","." ,"It", "was", "a pleasure", "to", "burn"];
	var text = [];
	var x = 8000;
	while(--x) text.push(words[Math.floor(Math.random() * words.length)]);
	main = document.getElementById('main')
	main.innerHTML= text.join(" ")
	html {
	height: 100%
	}
	body{
	height: 100%;
	display: flex;
	flex-direction: column;
	}
	main {
	flex-grow:1;
	overflow: scroll;
	}
	header, footer {
	height: 100px;
	border: 1px solid gold;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	}