我正在尝试用HTML和CSS创建一个简单的布局，使其能够占满整个屏幕，且两列的高度无论内容量大小都保持相等。
目前为止，滚动区域的高度停留在屏幕的高度，而不是整个页面的高度。请帮我解决这个问题。我已经尝试了几乎所有可以找到的教程。
以下是相关标记：
CSS代码。
目前为止，滚动区域的高度停留在屏幕的高度，而不是整个页面的高度。请帮我解决这个问题。我已经尝试了几乎所有可以找到的教程。
以下是相关标记：
<html>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
</body>
</html>
CSS代码。
html,body {
height: 100%;
}
#container {
width: 600px;
height: 100%;
background-color: black;
}
#sidebar {
float: left;
width: 200px;
height: 100%;
background-color: blue;
}
#content {
float: left;
width: 400px;
height: 100%;
background-color: red;
}