我在互联网上找到了很多关于这个问题的讨论和问题，但是它们似乎都与我的情况不匹配，并且解决方案高度特定于某种情况。
我有一个顶部高度为 100px 的header元素。我有一个左浮动的宽度为 250px 的div#sidebar 元素, 最后一个也是左浮动的div#main元素。
html、body和div#sidebar的高度均为 100%。
我的目标是使 div#sidebar 延伸到页面底部，而不考虑浏览器大小或内容大小。显然，如果内容超过可视页面高度，它应该正常工作并超出页面末端，引入滚动条。
然而，现在情况是，页面高度已经被计算为100% + 100px，即使没有任何会推动div#sidebar向下的内容，也引入了滚动条。到目前为止，我没有找到有效的解决方案，或者我可能错过了它，或者弄错了一个解决方案。不管怎样，我已经在这个问题上花费了超过一个小时的时间，我快要抓狂了。
是否有一种非JavaScript的方法可以使这正常工作，以防止header的高度被添加到100%中？
这是我的HTML/CSS代码——虽然我在上面包含了所有相关细节，但这应该会有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Awesome Template!</title>
<link href="./stylesheet.css" rel="stylesheet" />
</head>
<body>
<header id="primary">
<h1>My Awesome Template!</h1>
</header>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="main">
<h1>Main</h1>
</div>
</body>
</html>
CSS：
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
body
{
background: #fff;
font: 14px/1.333 sans-serif;
color: #080000;
}
header#primary
{
width: 100%;
height: 100px;
background: #313131;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
background-image: -moz-linear-gradient(#4d4d4d, #313131);
background-image: -o-linear-gradient(#4d4d4d, #313131);
background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
margin: 0px 0px 0px 20px;
padding: 0px;
line-height: 100px;
color: #ffffff;
}
#sidebar
{
float: left;
width: 250px;
background: #ccc;
min-height: 100%;
}
#main
{
float: left;
}