CSS高度+为什么这个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*/
}

Answer 2

1. 正文具有默认的8px边距，因此body {margin: 0;} - 它的水平滚动条
2. 垂直滚动条是因为.menubar-left {top: 50px; height: 100%} - 总高度为100％+ 50px。您可以使用overflow: hidden，%中的顶部或其他包装元素
来解决此问题

Answer 3

Demo

body, html{
  height: 100%;
  width: 100%;
  position: static;
  margin:0; /* need to avoid scroll bar as body has default margin */
}

.menubar-top{
  position: absolute;
  top: 0px;
  left: 0px;

  width: 100%;
  height: 50px; /* 50px height here given so adjust this from .menubar-left which has 100% height */
}

.menubar-left{
  position: absolute;
  top: 50px;
  left: 0px;

  width: 60px;
  height: calc(100% - 50px); /* as you have given 50px height for .menubar-top to need to adjust this 50px with height of .menubar-left */
}