Q:

Container with height:100% is larger than the whole page

I'm trying to fill the content container to 100% of the height while having a 30px header. But currently, the content container is larger than 100% which results in a scrollbar.
Code

html {
  padding:0;
  margin: 0;
  height:100%;
}
body {
  padding:0;
  margin: 0;
  height:100%;
}
#header {
  height: 30px;
  background: black;
  width: 100%;
  position: absolute;
  z-index: 2;
}
#container {
  position: relative;
  height:100%;
  padding-top:30px;
  background-color: #aaaaaa;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="header"></div>
    <div id="container"></div>
  </body>
</html>  

Demo: https://plnkr.co/edit/48SJjl9dB7S7IiC8JLcP?p=preview
What's the correct way to accomplish this? If it's possible I would even prefer to have the header positioned "relatively" and not absolute. But probably that's not possible?

A:

You could try and make these changes:
#container{
  height: calc(100% - 30px);
  padding-top: 0;
}

You can remove the position properties on both elements, as static will work just fine here.
Plunk
You are setting your content element to height: 100% which means it will take up the full height available from the parent element (body in this case). But header is also a child of body and you're giving it a height of 30px. 100% + 30px would exceed the full height available, and thus your scroll-bar. Adding padding-top as well, only increases this excess height.
Full code

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

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

#header{
  height: 30px;
  background: black;
  width: 100%;
  position: relative;
}

#container{
  position: relative;
  height: calc(100% - 30px);
  background-color: #aaaaaa;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <div id="header"></div>
   <div id="container"></div>
  </body>

</html>

