为什么CSS表现得很奇怪？

Question

我正在制作一个页面，希望我的大纲如下：

一切进展顺利，直到我开始添加正文和侧边栏。侧杆不会向下延伸到底部。我尝试使用height: 100%没有运气。当前网站：

CSS：

#wrapper
{
margin: auto auto auto auto;
text-align: center;
border: 10 Black;
background-color: Black;
width: 50%;
}

#left
{
    float: left;
border-right: 2px white;
width: 25%;
background-color: Black;
height: 100%;
}

#right
{
    float: right;
border-left: 2px white;
width: 25%;
background-color: Black;
height: 100%;
}

body 
{
color : Yellow;
background-color: #585858;
width: 960;
height: 100%;
}

.text
{
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
border: 10px White;
}

HTML：

<div id="right">
<img class="sideimg" src="data/images/kinected logo.png" height="150" width="150"/>
</div>
<div id="left">
<img class="sideimg" src="data/images/kinected logo.png" height="150" width="150"/>
</div>
<div id="wrapper">
<h1>Main header goes here</h1>
<div id="text">
<p>Main text goes here</p>
</div>
</div>

Answer 1

添加以下内容：

html,body{height:100%}

<强> Take a Look