CSS 100％高度，适用于文档而非视点

Question

我无法将div扩展到文档高度的100％（而不是视点高度）。我有一个特定的例子导致问题。

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

http://lavenderstone.co.uk/stackoverflow/

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

我不熟悉使用％的响应式设计，所以请原谅我。我最近问过一个类似的问题，但是建议的解决方案对我的进展问题不起作用，我觉得新线程比转移主题更有意义。谢谢。

Answer 1

问题是你某处没有固定的高度，所以height属性不知道100％的高度是多少。所以改为使用你的视口高度。

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

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

#menu-container {
  height: 100%;
}

使用display：table;会导致你的身高：100％;如果您的视口很小，则与视口一样高，或者与内容一样高。

希望这会有所帮助。