html - 如何嵌套 100% 高度的 div 并保持底部页脚(纯 CSS)

Question

我在以 100% 高度嵌套 divs 时遇到问题。碰巧页脚没有我想要的那么远，它仍然在父级 div 的底部之上。

我已经重现了发生在我身上的事情，这就是我想要的。

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

http://jsfiddle.net/Cazs/wkwa73b9/

但始终使用 100% 高度的 div

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

我为布局着色并给出了结构，以便更清楚地看到我想要什么，我希望你明白我想要的是 main 中的每个 div 都是 100% 高度和页脚保留在父 div

的底部

Answer 1

我相信您正在努力实现这样的目标 DEMO如果您计划使用 bootstrap，那么您正在构建的整个结构将会改变。如果您计划使用 bootstrap，您应该提前决定。我建议从您的 html 中删除所有无用的类，因为这会导致混淆。

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

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

编辑

这是一个 fiddle ，演示了如何使用一些 jquery 来完成你想要的 DEMO 2 .

这是一个 fiddle ，展示了如何仅使用包含表格属性的 css 来完成类似的事情。 DEMO 3