Skip to content

Instantly share code, notes, and snippets.

@bmcminn
Created May 4, 2017 20:15
Show Gist options
  • Save bmcminn/bc2e3e8d232002703e71949041811dcb to your computer and use it in GitHub Desktop.
Save bmcminn/bc2e3e8d232002703e71949041811dcb to your computer and use it in GitHub Desktop.
HTML mobile app structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Test</title>
<style type="text/css">
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
overflow-y: scroll;
min-height: 100vh;
margin: 0;
}
.app {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.app-container {
flex: 1;
}
/* non structural styles */
footer {
padding: 1rem;
background-color: #353535;
color: #fff;
text-align: center;
}
</style>
</head>
<body class="app">
<main class="app-container">
<pre>
App Content
@sauce: <a href="https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/">https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/</a>
</pre>
</main>
<footer class="">
&copy; 2017 -- Owner
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment