css - 文档不是视点的 CSS 100% 高度

Question

我无法将 div 扩展到文档高度的 100%（而不是视点高度）。我有一个导致问题的具体示例。

可以在这里找到一个示例，（jsfiddle 的视图窗口不允许我正确演示问题，抱歉）：

您会注意到，如果您将视点高度降低到内容高度以下（当滚动条出现时），左侧边栏和内容 div 不再扩展为完整的文档高度 - 它们仅显示视点的高度。

在此处输入图像描述

我是使用 % 进行响应式设计的新手，请见谅。我最近问了一个类似的问题，但建议的解决方案不适用于我的进展问题，我觉得一个新线程比转移话题更相关。谢谢你。

score 1 · Accepted Answer

问题是你在某处没有固定的高度，所以 height 属性不知道高度 100% 到底是多少。因此，它使用您的视口高度。

您可以使用以下 CSS 解决您的问题。

#pagewrap {
  display: table;
  height: 100%;
}

#menu-container {
  height: 100%;
}

使用显示：表格；会导致你的身高：100%；与您的视口一样高，或者如果您的视口很小，则与您的内容一样高。

希望这有帮助。

1 回答 1