如何嵌套100％高的div并保持底部的页脚（纯CSS）

Question

我在将divs嵌套在100％高度时遇到问题。 可能是页脚没有像我想要的那样向下，而是保持在父div底部的上方。

我转载了发生在我身上的事情，这就是我想要的。

html,body,.container-main,main,main > .container-fluid{
    color:#fff;
    height:100%;
}

但总是将divs高度设置为100％

http://jsfiddle.net/Cazs/ah56LLxe/

我给布局上色并赋予了结构布局，以便更清楚地了解我想要的内容，希望您理解我想要的是main区域中的每个div高度均为100％，页脚保留在父div的底部

Answer 1

我相信您正在尝试实现类似DEMO的功能。如果您计划使用引导程序，那么构建的整个结构将会改变。 您应该事先决定是否计划使用引导程序。 我建议从您的html中删除所有不符合目的的类，因为这会引起混乱。

html,body,.container-main,main,main > .container-fluid{
color:#fff;
height:100%;
}

我个人不会使用上述代码，因为我通常会尝试将body, html分开以防止混淆。

编辑

这是一个小提琴，演示了如何使用一些jquery DEMO 2完成所需的操作。

这是一个小提琴，显示了仅使用合并了表属性的css如何可以实现类似的操作。 演示3