Skip to content

Instantly share code, notes, and snippets.

@dpogue
Created September 10, 2017 04:23
Show Gist options
  • Save dpogue/d3b9722904c68cd2e3ba349d551cad36 to your computer and use it in GitHub Desktop.
Save dpogue/d3b9722904c68cd2e3ba349d551cad36 to your computer and use it in GitHub Desktop.
Cordova iOS WKWebView footer positioning example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, viewport-fit=cover">
<title>Hello World</title>
<style>
html {
font: -apple-system-body;
}
body {
font-family: -apple-system;
font-size: 1.25em;
padding-top: 2.5em;
padding-bottom: 1.5em;
margin: 0;
margin-top: 44px;
padding: 0;
}
header {
position: fixed;
height: 44px;
width: 100%;
top: 0;
left: 0;
background: lightsteelblue;
text-align: center;
font: -apple-system-title1;
line-height: 44px;
}
footer {
position: absolute;
height: 32px;
width: 100%;
bottom: 0;
left: 0;
background: steelblue;
text-align: center;
}
</style>
</head>
<body>
<header>Hello World</header>
<footer>This is a test</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment