Skip to content

Instantly share code, notes, and snippets.

@drupalmk

drupalmk/example.html

Last active March 22, 2020 19:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drupalmk/4de95f4e28caccc28b15aa2f1b6fb587 to your computer and use it in GitHub Desktop.
Save drupalmk/4de95f4e28caccc28b15aa2f1b6fb587 to your computer and use it in GitHub Desktop.
Download ZIP
HTML + CSS. Content overlapping on header with pinned nav
Raw
example.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Content overlapping on header with pinned nav</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
text-align: center;
font-size: 30px;
text-transform: uppercase;
font-family: arial;
color: #fff;
}
:root {
--navHeight: 10vh;
--headerHeight: 90vh;
}
nav,
header {
position: fixed;
width: 100%;
}
nav {
background: #000;
height: var(--navHeight);
line-height: var(--navHeight);
top: 0;
z-index: 1;
}
header {
background: brown;
height: var(--headerHeight);
line-height: var(--headerHeight);
top: var(--navHeight);
}
main {
position: relative;
margin-top: calc(var(--navHeight) + var(--headerHeight));
height: 200vh;
line-height: 200vh;
background: linear-gradient(145deg, blue 0%, purple 50%, yellow 100%);
}
</style>
</head>
<body>
<nav>
Nav - 10% of view port height
</nav>
<header>
Header - 90% of view port height
</header>
<main>
Main content - 200% of view port height
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment