HTML-侧边栏未填满屏幕的100%

我有一个侧边栏，它只占用足够的空间来容纳它所包含的内容，而不是占用包含所有元素的包装的100%，下面的图像应该理解我的意思：

以下是我正在使用的一些代码：

HTML 这对我很有用：

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
} 

#wrapper
{
    width:1000px;
    height:100%;
    margin:0px auto;
    background-color:#efefef;
}

#rightSide
{
    float:right;
    position:relative;
    width:220px;
    height:100%;
    background-color:#efefef;
}

#rightSide img
{
    vertical-align:middle;
}
#rightSide h2
{
    padding:10px 0px;
}

#rightSide p
{
    padding:10px 0px;
}

#footer
{
    width:100%;
    padding: 10px 0px;
    background-color:#000000;
    float:left;
}

#footer p
{
    color:white;
    text-align:center;
}

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
} 

> #wrapper
{
    width:100%;  //change this to 100%
    height:100%;
    margin:0px auto;
    background-color:#efefef;
}

#rightSide
{
    float:right;
    position:relative;
    width:100%; //Change this to 100%
    height:100%;
    background-color:#efefef;
}

#rightSide img
{
    vertical-align:middle;
}
#rightSide h2
{
    padding:10px 0px;
}

#rightSide p
{
    padding:10px 0px;
}

#footer
{
    width:100%;
    padding: 10px 0px;
    background-color:#000000;
    float:left;
}

#footer p
{
    color:white;
    text-align:center;
}