CSS height + 为什么这个plunker上有滚动条？

Question

我已经为布局创建了一组非常简单的 css 类。

Plnkr

但是，我无法摆脱预览中的滚动条。

这一定是个很小很傻的东西，但我拿不到它。

Answer 1

首先，添加:

margin:0;

在您的 html, body{ CSS 样式中。

例如:

html, body{
  margin:0;
  /*more code*/
}

此外，您已将 menubar-left 设置为 height:100%。

menubar-top 是 50px 高。

这意味着加起来是 100% + 50px。

您可以将 menubar-left 的高度设置为 height: calc(100% - 50px); 或更改 menubar-top到 % 然后将其从 100 中移开，这将是您新的 menubar-left 高度。

你的代码应该是这样的:

plnkr using calc()

menubar-left{
  height:calc(100% - 50px);
  /*more styles*/
}

plnkr using %

menubar-top{
  height:5%;
  /*more styles*/
}

menubar-left{
  height:95%;
  /*more styles*/
}