<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS fixed Navigationbar</title>
<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
body{
font-size: calc(0.4rem + .8vh + .8vw);
background-color: burlywood;
max-height: 100%;
height: calc(100vh - 6px); /*body 6px border*/
border: solid 3px;
}
body,
header
section{
margin: 0;
padding: 0;
max-width: 100vw;
overflow-x: hidden;
}
header.fixed{
position: fixed;
width: calc(100% - 6px); /*body 6px border*/
padding: 0.6vw;
margin: 0;
height: 100px;
background-color: #FFFF00;
border: goldenrod 8px double;
box-sizing: border-box;
}
section.fixed{
position: fixed;
width: calc(100% - 6px); /*body 6px border*/
top: 101px;
padding: 1.3vw;
margin: 0;
max-height: calc(100vh - 6px - 100px); /*body 6px border / header height 100px */
overflow-y: scroll;
box-sizing: border-box;
border: goldenrod 8px double;
background-color: green;
}
h1,nav{
float: left;
}
/*]]>*/
</style>
</head>
<body>
<header class="fixed"><h1>CSS fixed Navigationbar</h1><nav></nav></header>
<section class="fixed">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi bibendum augue vel metus. Mauris malesuada aliquet dui. Mauris condimentum, est nec consectetuer accumsan, purus lacus tincidunt nisi, et tincidunt nisl felis vitae urna. Integer vestibulum lobortis ante. Fusce rutrum purus egestas mi vestibulum cursus. Nam tempus. Fusce tristique, lorem non sollicitudin molestie, purus libero aliquam dui, non sagittis eros diam eget arcu. Etiam eleifend. Sed feugiat ultricies ligula. Aliquam fringilla dolor non dui. Curabitur lacus arcu, consectetuer non, ullamcorper id, scelerisque ac, eros. Fusce magna. Proin tristique, tellus non varius imperdiet, dolor lectus volutpat nisi, id accumsan dui eros eu turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae nulla. Suspendisse tincidunt faucibus ipsum. Aliquam sit amet ligula. Nunc molestie facilisis ligula.
<br />
Praesent eget pede. Phasellus auctor blandit velit. Nulla nec nibh. Donec fermentum consectetuer augue. Praesent ultricies, justo eget dictum pretium, libero justo iaculis sapien, quis lobortis risus quam sit amet augue. In commodo vehicula lorem. Quisque in ante id metus dictum dapibus. Sed vitae orci eu pede facilisis rhoncus. Maecenas mattis lobortis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce blandit hendrerit leo. Nunc quam elit, dapibus eget, porta eu, vestibulum eu, arcu. Aenean iaculis nunc vel mi.
<br />
Aenean urna lacus, tincidunt id, ornare sit amet, hendrerit nec, justo. Nulla facilisis. Nulla ultricies auctor turpis. Vestibulum non odio at enim sagittis imperdiet. Etiam magna. Vivamus suscipit dictum velit. Nunc ultricies malesuada tortor. Vestibulum sit amet nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Ut tellus. In hac habitasse platea dictumst. Sed porttitor ligula at turpis. Pellentesque sit amet tellus sit amet massa egestas lobortis. Morbi mi libero, feugiat in, laoreet ac, tincidunt et, nisl. Donec feugiat lacinia nulla. Sed semper. Nullam adipiscing bibendum risus.
<br />
Aliquam vestibulum neque vel neque. Donec gravida, lectus in dictum varius, massa nunc lobortis neque, ut pharetra leo nibh sit amet nisi. Pellentesque convallis ipsum. Aliquam erat volutpat. Fusce tincidunt congue lorem. Donec lectus ipsum, luctus et, suscipit id, nonummy at, nisl. Morbi placerat sodales enim. Proin pede purus, sollicitudin quis, eleifend quis, aliquam in, massa. Sed porttitor condimentum metus. Ut vel diam id nisi blandit volutpat. In vel mauris nec arcu tempus euismod.
<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi bibendum augue vel metus. Mauris malesuada aliquet dui. Mauris condimentum, est nec consectetuer accumsan, purus lacus tincidunt nisi, et tincidunt nisl felis vitae urna. Integer vestibulum lobortis ante. Fusce rutrum purus egestas mi vestibulum cursus. Nam tempus. Fusce tristique, lorem non sollicitudin molestie, purus libero aliquam dui, non sagittis eros diam eget arcu. Etiam eleifend. Sed feugiat ultricies ligula. Aliquam fringilla dolor non dui. Curabitur lacus arcu, consectetuer non, ullamcorper id, scelerisque ac, eros. Fusce magna. Proin tristique, tellus non varius imperdiet, dolor lectus volutpat nisi, id accumsan dui eros eu turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae nulla. Suspendisse tincidunt faucibus ipsum. Aliquam sit amet ligula. Nunc molestie facilisis ligula.
<br />
Praesent eget pede. Phasellus auctor blandit velit. Nulla nec nibh. Donec fermentum consectetuer augue. Praesent ultricies, justo eget dictum pretium, libero justo iaculis sapien, quis lobortis risus quam sit amet augue. In commodo vehicula lorem. Quisque in ante id metus dictum dapibus. Sed vitae orci eu pede facilisis rhoncus. Maecenas mattis lobortis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce blandit hendrerit leo. Nunc quam elit, dapibus eget, porta eu, vestibulum eu, arcu. Aenean iaculis nunc vel mi.
<br />
Aenean urna lacus, tincidunt id, ornare sit amet, hendrerit nec, justo. Nulla facilisis. Nulla ultricies auctor turpis. Vestibulum non odio at enim sagittis imperdiet. Etiam magna. Vivamus suscipit dictum velit. Nunc ultricies malesuada tortor. Vestibulum sit amet nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Ut tellus. In hac habitasse platea dictumst. Sed porttitor ligula at turpis. Pellentesque sit amet tellus sit amet massa egestas lobortis. Morbi mi libero, feugiat in, laoreet ac, tincidunt et, nisl. Donec feugiat lacinia nulla. Sed semper. Nullam adipiscing bibendum risus.
<br />
Aliquam vestibulum neque vel neque. Donec gravida, lectus in dictum varius, massa nunc lobortis neque, ut pharetra leo nibh sit amet nisi. Pellentesque convallis ipsum. Aliquam erat volutpat. Fusce tincidunt congue lorem. Donec lectus ipsum, luctus et, suscipit id, nonummy at, nisl. Morbi placerat sodales enim. Proin pede purus, sollicitudin quis, eleifend quis, aliquam in, massa. Sed porttitor condimentum metus. Ut vel diam id nisi blandit volutpat. In vel mauris nec arcu tempus euismod.
<br />
Integer velit mi, mollis mollis, pulvinar eget, nonummy ac, risus. In eu tellus sollicitudin nisl blandit convallis. Curabitur eros. Nullam nec nisl. Sed ut tortor. Morbi accumsan. Quisque ultricies lectus sed risus. Vivamus purus. Etiam gravida euismod velit. In hac habitasse platea dictumst. Aenean purus leo, venenatis nec, pharetra eu, gravida non, metus. Aenean at elit. Aenean nec nibh.</section>
</body>
</html>
