Html 如何嵌套100%高度div并保持底部页脚（纯CSS）

在100%高度嵌套

div

时，我遇到了一个问题。恰好页脚没有我想要的那么低，它仍然在父

div

的底部上方

我复制了发生在我身上的事情，这就是我想要的

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

但始终使用100%高度的

divs

---

我给布局上色并赋予结构，以便更清楚地看到我想要什么，我希望您理解，我想要的是

main

中的每个div都是100%的高度，并且页脚保持在父

div

的底部。我相信，如果您计划使用自举，您正在尝试实现这样的目标。您正在构建的整个结构将发生变化。您应该提前决定是否计划使用引导。我建议从html中删除所有不起作用的类，因为这样会造成混乱

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

我个人不会使用上述代码，因为我通常会尝试将

body、html

分开，以防止混淆

编辑

下面是一个演示如何使用jquery实现所需功能的小提琴

---

这里有一个小提琴，展示了如何仅使用包含表属性的css来完成类似的事情

我认为你必须再次研究引导容器。首先添加一行，然后添加一个列，在其中指定每个设备的宽度（即每个屏幕宽度），例如，2列带有col-xs-12 col-sm-6，将在智能手机上显示2个区块始终一个接一个全宽，在更大的屏幕上显示彼此并排的半宽。如果您有事情要做，请不要。。。但在这种情况下，我没有使用引导，bootstrap未使用看到这样的工作不应该寻求列和行，但3层上层不适合宽度OK我想你忘了包括它，因为你添加了容器流体，如果你使用bootstrap，你应该只把行放在里面，只把行放在列中，因为bootstrap会设置边距等，如果你尝试使用样式，可能会把事情搞砸cssIf，我已经想到了，但我添加的示例不使用它如果有人可以帮助修复，页脚是“无人地带”，那么我可以在bootstrapI上使用它。我不确定我是否理解正确，你不能把页脚放在一个普通的div或者内容容器之后的另一个容器中，然后你就把一行和一些列放在里面吗？我想找到类似你的演示的方法，但是在你的例子中，你选择了删除main。容器高度：100%；并给出一个高固定值“一，二，三”，当我在容器main中定义me 100%到100%适合窗口高度“浏览器”时，我看到的问题，但是滚动的数量，问题来了。也许是虫子？如果我有一个968px宽的监视器，父div被设置为968px，这是否正是我想要的，但是如果不使用Jquery，只有CSS是不可能的？我已经用另一种可能的解决方案编辑了我的答案。