diedVIPs

html knowhow

Feststehender header und footer










Feststehender header und footer mit scrollbarem main

So sieht´s aus

Kontakt

Tel.
089 0000 0000
Fax
089 0000 0001
Öffnungszeiten
Mo–Fr: 7:00–21:00 Uhr
Sa: 9:00–15:00 Uhr
E-Mail Adresse
ham.busch@web.de
Geschäftsadresse
HTMLKnowhow
Musterstraße 93
6646 Heppenheim
Quellcode
<html>
<head>
<style type="text/css">
header {background: #bbb; width: 100%; position: fixed; height:8em; left: 0; top: 0;}
footer {background: #008080; width: 100%; position: fixed; line-height:10px; left: 0; bottom: 0px; padding-top:-40em}
.scrollbar::-webkit-scrollbar {background-color:green;width:16px}
.scrollbar::-webkit-scrollbar-track {background-color:fuchsia}
.scrollbar::-webkit-scrollbar-thumb {background-color:aqua;border-radius:16px;border:5px solid blue}
.scrollbar::-webkit-scrollbar-button {display:none}
.scrollbar {height: 55vh;width: 25vw;min-width: 100%;background: transparent;overflow-y: scroll;border-color:aqua;border-width:10px;}
.overflow{min-height: 100vh}
</style>
</head>

<body>
<header>Irgend etwas</header>
<div class="scrollbar">
<main>Irgend etwas</main></div>
<footer>Irgend etwas</footer>
</body>

</html>