如何使 sidenav increase/decrease 的高度始终填满整个网页

Question

我一直在尝试创建一个网站，其中包含 header（顶部）、sidenav（左侧）和网站的主要内容。现在这里是一个布局示例

https://jsfiddle.net/qdza4bxc/1/

现在，在学习了一点 JavaScript 之后，我做了一个函数，当页面滚动时 increases/decreases sidenav 的 top-padding，这里是示例：

https://jsfiddle.net/4vtuq6m8/

但这在 sidenav 内部的顶部留下了很大的差距。所以我想知道 w3school 是如何做到这一点的，当你向下滚动他们的页面时：https://www.w3schools.com/html/default.asp 你可以看到当你向下滚动他们的网站时，侧边栏的高度和内容总是保持在完美的位置。

如果有人对此有解决方案，我会很高兴！

Answer 1

var header = document.querySelector('header');
var headerHeight = header.offsetHeight;
var sidebar = document.querySelector('#sidebar');

document.addEventListener('scroll', function(e) {
  // Check how many pixels have been scrolled
  var scrollTop = document.documentElement.scrollTop;
  // offset should never be higher than the header
  scrollTop = scrollTop > headerHeight ? headerHeight : scrollTop;
  // Calculate the final offset to apply to the height
  var offsetTop = headerHeight - scrollTop;

  sidebar.style.height = 'calc(100% - ' + offsetTop + 'px)';
});

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

header {
  width: auto;
  height: 100px;
  background-color: indianred;
}

#sidebar {
  width: 20%;
  height: calc(100% - 100px);
  position: fixed;
  bottom: 0;
  background-color: gray;
  float: left;
  overflow-y: auto;
}

#sidebar h2 {
  margin: 0;
}

section {
  width: 80%;
  float: right;
  background-color: antiquewhite;
}

<header></header>
<div id="sidebar">
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Hi there</h2>
  <h2>Soon done</h2>
  <h2>Done!</h2>
</div>
<section>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h1>Main Content</h1>
  <p>This is just some text that i put inn to make this look some what of a website</p>
  <h2>Next Section</h2>
  <p>This is just some text that i put inn to make this look some what of a website</p>
</section>

如何使 sidenav increase/decrease 的高度始终填满整个网页

How to make sidenav increase/decrease in height, to always fill the entire webpage

html

javascript

height