<!DOCTYPE HTML>
<html>
<head>
<title>Anker</title>
<meta charset="UTF-8">
<style>
* {
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}
html , body {
height:100%;
/[I]overflow:hidden;[/I]/
}
header {
height:100px;
width:100%;
position:fixed;
top:0;
color:#ddd;
z-index:88;
}
header h1 {
background:#d59;
padding:20px 0 19px 0;
border-bottom:1px solid #eee;
}
header nav {
background:#444;
float:left;
width:100%;
}
header nav a {
float:left;
padding:10px 0;
text-align:center;
text-decoration:none;
font-weight:bold;
color:#fff;
width:33.334%;
border:1px solid #fff;
}
footer {
height:82px;
width:100%;
background:#444;
position:fixed;
bottom:0;
color:#ddd;
}
main {
width:300%;
height:calc( 100% - 199px );
}
#home , #about , #impressum {
position:relative;
top:116px;
width:33.33%;
height:100%;
float:left;
left:0;
background:#add;color:#000;
overflow:auto;
}
#home , #impressum {
background:#aa0;
}
h2 , p {
padding:40px 100px;
}
</style>
</head>
<body>
<header>
<h1>Homepage</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#impressum">Impressum</a>
</nav>
</header>
<main>
<div id="home">
<h2>Startseite</h2>
<p>Eine wunderbare Heiterkeit hat...</p>
</div>
</div>
<div id="about">
<h2>Paule Pulmo</h2>
<p> meine ganze Seele eingenommen, </p>
</div>
<div id="impressum">
<h2>Impressum</h2>
<p>gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. </p>
</div>
</main>
<footer>
<p>© Webmaster 2000 - 2020</p>
</footer>
</body>
</html>