Div侧边栏不会随中间列的内容扩展

Question

我有一个我正在处理的网页，当中间没有内容时它看起来很棒。当我试图将内容添加到中心列时，最近出现了问题。我添加了一个表格，其中包含人们必须回答的一长串问题。问题是，当这个内容比窗口大小大时，它会向下滚动显示内容，但侧边栏保持相同的大小。

我已将下面的代码附加在jsfiddle上。任何帮助，将不胜感激。 :)

http://jsfiddle.net/qp5Zk/3/1

@charset"utf-8"; 
html, body { 
width: 100%; /* IE6 Hacks */ 
height: 100%; /* IE6 Hacks */ 
margin: 0; 
padding: 0; 
} 
body { 
background-color: green; 
background-repeat: repeat; 
height: 100%; 
} 
#content_wrapper { 
margin: 0 auto; /* Center it on the page */ 
width: 93%; 
height: 100%; 
} 
#center_column { 
margin: 0 14px 0 14px; /* 0 Right Column 0 Left Column */ 
background-color: #FFF; 
height: 100%; 
} 
#left_column, #right_column { 
width: 14px; 
height: 100%; 
} 
#left_column { 
float: left; 
background-color: pink; 
} 
#right_column { 
float: right; 
background-color: orange; 
} 
#header_top { 
width: 100%; 
height: 14px; 
background-color: #EEE; 
} 
#header_top_grad { 
width: 100%; 
height: 14px; 
background-color: blue; 
background-repeat: repeat-x; 
} 
#header_middle { 
height: 40px; 
width: 100%; 
background-color: yellow; 
background-repeat: repeat-x; 
} 
#header_bottom { 
background-color: blue; 
background-repeat: repeat-x; 
height: 14px; 
width: 100%; 
} 
#logo { 
width: 100%; 
background-color: #EEE; 
} 
#logo img { 
width: 253px; 
height: 47px; 
margin: 10px 0 10px 20px; 
} 
#main_table { 
color: #696969; 
font-size: small; 
width: 90%; 
margin: 0 auto; 
border-spacing: 0; 
border: 0; 
/* IE border-spacing workaround */ 
border-collapse: collapse; 
} 
#main_table td { 
/* Padding between each question */ 
padding-bottom: 20px; 
} 
.q_column, .r_column, .e_column { 
background-color: #FFF; 
} 
.q_column { 
font-weight: bold; 
text-align: right; 
/* Padding between question and response column */ 
padding-right: 10px; 
} 
.red { 
color: #F00; 
font-size: large; 
} 
.text_field { 
border: 1px solid; 
border-collapse: collapse; 
border-color: #BBB; 
color: #000; 
} 
.small_text { 
font-size: smaller; 
} 
.r_column { 
width: 35%; 
} 
.e_column { 
width: 25%; 
} 

我已经不成功地试图clearfix但可能做错了什么，或者它甚至可能不是正确的解决方案。

Answer 1

@ user2151158设置最小高度类似这样的内容类

#content_wrapper { 
    margin: 0 auto; /* Center it on the page */ 
    width: 93%; 
    min-height: 100%; 
} 

Answer 2

试试这个小提琴： http://jsfiddle.net/krish/qp5Zk/7/

我改变了center_coloum为相对，把左，右列绝对改变的细节如下所示。

更改CSS，你是在谈论哪一个

#center_column { 
    margin: 0 14px 0 14px; /* 0 Right Column 0 Left Column */ 
    background-color: #FFF; 
    height: 100%; 
    position:relative; /*added*/ 
    } 

    #left_column 
    { 
    /* removed float: left; */ 
    background-color: pink; 
    position:absolute; /*added*/ 
    left:0px; /*added*/ 
    } 

    #right_column { 
    /*removed float:right*/ 
    background-color: orange; 
    position:absolute; /*added*/ 
    right:0px; /*added*/ 
    }