Div 侧边栏不随中心列的内容扩展答案

【问题标题】：Div sidebars do not expand with content of the center columnDiv 侧边栏不随中心列的内容扩展
【发布时间】：2013-02-24 21:41:02
【问题描述】：

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

我在 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 失败，但可能做错了什么，甚至可能不是正确的解决方案。

【问题讨论】：

侧边栏你说的是哪一个？
当我谈到侧边栏时，我的意思是左栏和右栏。 @snowp 这确实修复了中心栏的调整，但它炸毁了左右栏。
仍然不清楚，但请检查这个小提琴jsfiddle.net/krish/qp5Zk/6
@krish 感谢您迄今为止的帮助。这确实使上下文保持一致，但它消除了浮动 div。如果您查看原始小提琴，它的侧面有粉红色和橙色条，然后是带有文本的白色中间空间。文本继续向下超过原始页面大小，粉红色和橙色 div 不跟随。我似乎无法让粉色和橙色条动态向下移动到页面的新底部。
希望能让您更好地了解我遇到的问题，我在此处托管了该页面：network-junkies.com/take2 您可以看到每一侧的栏在您向下滚动后就会停止。

标签： html css-float clearfix

【解决方案1】：

@user2151158 像这样为 Content 类设置最小高度

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

【讨论】：

【解决方案2】：

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

我把center_coloum改成relative，把左右列改成absolute，变化的细节如下图。

改变的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*/
    }

【讨论】：