Question

我的页面底部附近有一个div，我希望一直延伸到窗口的最底边，这样就无法在其下方看到页面的背景颜色。最初，根据渲染页面的大小屏幕，在div下面仍然可以看到一小段背景颜色。添加

html, body, .wrapper {
    height: 100%;
}

到我的CSS（“包装器”是相关div的类），我修复了那个问题，但现在div的高度约为500px（根据窗口大小的不同而不同）尽管div中唯一的元素总高度为132px（无论窗口大小如何都不会改变）。由于div的位置，这个500px的高度使页面拉伸，现在我的页面底部有一个大的空白区域，在div内的内容下面。

我使用Chrome的开发人员工具检查HTML，body和div标签，没有奇怪的填充/边距，也没有定义的高度（除了我设置的“100％”）。如果你想要更多的代码，我很乐意提供更多代码，但由于我不知道究竟是什么问题，我不知道什么是相关的（加上我使用bootstrap所以找到所有相关的CSS可以是一个有时疼痛）。提前谢谢。

Answer 1

您可以使用flexbox在示例中使用.wrapper或.table填充剩余的高度。

对于父元素（在您的示例中，正文）设置display: flex; flex-direction: column;

对于要展开的元素（.wrapper或.table）设置flex-grow: 1。

您的示例已更新：https://jsfiddle.net/754s67ur/2/

Answer 2

我已更新您在评论中发布的小提琴，以添加背景颜色并删除填充和边距，以更好地直观显示问题here。

您需要的是CSS calc功能，让您的.table div占据页面的100％减去页面的导航和正文内容（由<p>表示你的小提琴。）

在小提琴中，它们都是18px，所以结合它是36px，这就是我需要减去100％。所以风格看起来像这样：

height: calc(100% - 36px);

这是计算剩余空间的方法。但这仅适用于静态高度元素。这是solution的小提琴。

如何使div扩展到页面底部而不会太高

2 个答案: