html - 将浮动 div 拉伸到灵活容器高度的高度。div 有背景图片

Question

我已经寻找答案并找到了一些，但它们看起来仅适用于具有背景颜色的 div，而不适用于带角的背景图像等。我的示例位于（已删除）

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

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

我会以错误的方式解决这个问题吗？洞察力将非常有帮助，在此先感谢！

Answer 1

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

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

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