<!--
Aysad Kozanoglu
1. solution of fixed header templating
-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Simple hybrid app fixed header template </title>
<!--[if lt IE 9]>
<style>
.header{width:auto}
</style>
<![endif]-->
</head>
<body>
<div class="header"> This is the fixed header, </div>
<div class="AppContent">
<p>Content starts here</p>
<p> <a href="index2.html">another solution with footer fixed</a> </p>
<p> <a href="index3.html">another solution with footer fixed</a> </p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
<p>test scroll</p>
</div>
</body>
</html>
// Code goes here
/* Aysad kozanoglu */
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
-ms-box-sizing: inherit;
box-sizing: inherit;
}
html, body {
margin:0;
padding:0;
}
.header {
position:fixed;
left:0;
right:0;
width:1000px;
max-width:1000px;
height:50px;
background:#e0e0e0;
margin:auto;
}
@media screen and (max-width:1000px) {
.header {
width:auto
}
}
.AppContent {
max-width:1000px;
margin:auto;
border:1px solid #000;
padding:10px 10px 10px;
background:#f9f9f9;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #CCC;
margin: 5px;
}
div#topdiv, div#bottomdiv{
position:fixed;!important;
left:0px;
width:100%;!important;
color:#CCC;
background:#333;
padding:10px;
}
div#topdiv{top:0px;}
div#bottomdiv {bottom:0px;}
.appContent {
max-width:1000px;
margin:auto;
border:0px solid #000;
padding:5px 10px 5px;
background:#eee;
}
</style>
</head>
<body>
<div id="topdiv">Top div header content</div>
<div class="appContent">
<h1>app content</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
</div>
<div id="bottomdiv">Bottom div footer content</div>
</body>
</html>
<!--
simple lightweigt pure css html skelet
webapp hybridapp responsive
Aysad Kozanoglu
email: k.a@tuta.io
-->
<html lang="de">
<head>
<meta charset="utf-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
/* Generic pane rules */
html { -webkit-text-size-adjust: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
overflow-y:hidden;
}
body {margin: 0; -webkit-text-size-adjust: 100%; }
.page { left: 0; right: 0; top: 0; bottom: 0; }
.row, .col, .page { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fill, .pane { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100% }
.pane { display: none; }
/* Workaround: in landscape mode, IEMobile makes bottom toolbar overlap the page, so shorten the page by 75px to compensate */
.iemobile .page { bottom: -6px; }
@media screen and (orientation:landscape) { .iemobile .page { bottom: 75px; } }
/* Specific pane configuration */
.header.row { height: 75px; background: #333; }
.body.row { top: 75px; bottom: 50px; background: #000; padding: 1em; }
.footer.row { height: 50px; bottom: 0; background: #333; }
body { color: White; background: #000; font-family: Segoe UI, Helvetica, Arial, Sans-Serif; }
.header, .footer { padding: 0 1em; }
</style>
</head>
<body>
<div class="header row">
<h2>Navigation header</h2>
</div>
<div class="body row scroll-y">
<p>Here's a big rectangle. It's just dummy content:</p>
<div style="background: #008; height: 400px; padding: 1em">Making it tall enough to scroll</div>
<p>Here's another lovely rectangle:</p>
<div style="background: #080; height: 400px; padding: 1em">Making it tall enough to scroll</div>
</div>
<div class="footer row">
<p>My footer. Could put icons here.</p>
</div>
</body>
</html>