css variables test

subtract header height with css variable

by Soviut

HTML

<div class="page">
  <header class="header">
    header
  </header>
  
  <main class="main">
    <aside class="sidebar">
      this is sidebar
    </aside>
    
    <div class="content">
      <div class="placeholder">placeholder</div>
      <div class="placeholder">placeholder</div>
      <div class="placeholder">placeholder</div>
      <div class="placeholder">placeholder</div>
      <div class="placeholder">placeholder</div>
      <div class="placeholder">placeholder</div>
      <div class="placeholder">placeholder</div>
    </div>
  </main>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
}

.header {
  padding: 10px;
  box-sizing: border-box;

  background: cornflowerblue;
}

.main {
  position: relative;
  display: flex;
  height: 100%;
  
  background: red;
}

.sidebar {
  position: fixed;
  height: calc(100% - var(--vh, 1vh));
  
  background: #EEE;
}

.placeholder {
  height: 300px;
}

JavaScript

window.addEventListener('resize', () => {
  // We execute the same script as before
  const header = document.querySelector('.header')
  document.documentElement.style.setProperty('--vh', `${header.getBoundingClientRect().height}px`)
});