html - 将 float 的 div 拉伸(stretch)到灵活容器的高度。 Div 有背景图片

Question

我一直在寻找答案并找到了一些，但它们看起来只适用于具有背景颜色的 div，而不适用于带 Angular 的背景图像等。我的示例位于(已删除)

我希望菜单和“页面”在 100% 的时间里高度相同。无论哪个更大，即如果页面包含更多内容，菜单都必须拉伸(stretch)，反之亦然。

如您所见，背景图像的阴影等是绝对定位在各自 div 内的 div，然后 z-indexed 低于容器...

我是不是用错了方法？洞察力将非常有帮助，提前致谢!

Answer 1

将 div 的高度属性设置为其父级的 100%，这将是文档的主体或包含的 div。然后简单地设置顶部和底部的边距。

#menuDiv {
    height: 100%;
    margin: 100px 0 25px 0;
}

内容 div 也一样。 div 的大小属性不会因背景图像而改变。尽管将两个 div 放在一个包含 div 中并将两个子项(菜单和内容)设置为其父项的 100% 可能会更好，然后在包含的 div 上设置一个等于菜单高度的最小高度。如果您不这样做并且内容 div 较小，它看起来会很难看。