css - 如何在动态驱动 css 流体/固定布局上强制 100% 高度

Question

这里的例子小提琴

我正在使用流体/固定布局。我需要我的固定侧占据页眉和页脚内容之间 100% 的空间。

我的右栏：

#rightcolumn{
float: left;
width: 200px; /*Width of right column in pixels*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FDE95E;
height:100%;
}

Answer 1

所以你可以用css“display：table”和“table-cell”来做到这一点。这是我开始工作的小提琴的副本，但我所做的是将你的 #rightcolumn 嵌套到 #contentwrapper div 中，然后像这样修改 css：

#contentwrapper{ display: table; }
#rightcolumn{ display: table-cell; }
#contentcolumn{ display: table-cell; }

还有“#rightcolumn” - 删除“float：left;” 财产