Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
header.site-header { position: fixed; top: 0; left: 0; right: 0; height: 64px; background: white; border-bottom: 1px solid #eee; z-index: 500; display: flex; align-items: center; padding: 0 2rem; } /* Offset page content */ main { padding-top: 64px; /* Same as header height */ } /* Dynamic using CSS variable */ :root { --header-height: 64px; } header { height: var(--header-height); } main { padding-top: var(--header-height); }
Result
Open