Html 两个div的高度-content和siderbar

有人能发现错误或告诉我如何解决问题吗

我有下面一个网站的HTML和CSS。我希望得到一个边栏的高度与它旁边的内容部分相同，所以它们都延伸到网页的底部。在html、body和div元素上使用height:100%表示浏览器的完整高度，而不是内容的高度。而忽略高度会使侧边栏太短。有没有办法让内容和侧边栏部分导航相匹配

这是我目前写的CSS：

html
{
    min-height:100%;
    position: relative;
}

body 
{
    margin: 0;
    padding: 0;
    font-family: "Sans-serif", calibri;
}

.headerreplacement 
{
    width: 100%;
    height: 250px;
    margin: 0 0 0 0; 
    background: url(newspaperbanners.png) no-repeat;  
}

#navigation 
{ 
    float: left;
    background: #333;
    width: 100%;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{ 
    list-style-type: none;
    display: inline;
}

#navigation ul li a
{
    display: block;
    float: left;
    text-decoration: none;
    width: 100px;
    color: white;
    text-align: center;
    padding: 10px 10px;
}

#navigation li a:hover 
{ 
    background: #996699; 
    text-decoration: underline;
}

.visiting_link
{
    background: #333;
    clear:both;
}

.submenu
{ 
    clear:both;
    padding-left: 20px;
}

#content-container
{
    width: 100%;
    margin: 0;
    padding:0;
}

#section-navigation
{
    width: 280px;
    position: relative;
    background-color: #996699;
    margin: 0;
    height: inherit;
}

#section-navigation ul
{
    margin: 20px;
    padding: 0;
}

#section-navigation ul li
{
    list-style-type: none;
}

#section-navigation ul li a
{
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 10px;
}

#section-navigation ul li a:hover 
{
    background: #333; 
    text-decoration: underline;
}

#content
{
float: left;
width:50%;
    overflow: hidden;
    height:100%;
    margin: 0 200px 50px 50px;
}

HTML的基本概要如下。然而，在div id=content部分，其他网页上会有更多的文本

---

希望这一切都有意义。我尝试过使用这个网站上的很多不同的建议，但我就是看不出如何解决这个问题。提前非常感谢。

根据你所说的，这是我对你的意思的最好解释；将以下内容添加到当前CSS中：

  #section-navigation { float:left; }
  #section-navigation ul { height:100%; }
  #content { margin:0 200px 0 50px; }

如果我错了，请纠正我。祝你好运

  #section-navigation { float:left; }
  #section-navigation ul { height:100%; }
  #content { margin:0 200px 0 50px; }