html - 在CSS中计算高度

我有一个这样的CSS:

#sidebar {
   float: left;
   margin: 0;
   padding: 0;
   background: #044169;
}
#sidebar-menu {
   height: 100%;
   margin: 0;
   padding: 0;
   background: #CCCCCC;
}

(称之为 test.css)和一个简单的 HTML 文件，如下所示:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="test.css">
</head>
<body>
  <h1>Test</h1>
  <div id="sidebar">
      <div id="sidebar-menu">
          <ul>
             <li>One</li>
          </ul>
      </div>
  </div>
</body>
</html>

我真的不明白为什么sidebar-menu是 35px高，并且sidebar是 51px宽的。不应该sidebar-menu高达sidebar ...?!?

在我的脑海里，我想:好吧，margins是 0, paddings都是 0，所以包含元素 sidebar-menu ，其中有 height:100% (我认为容器的)应该和容器一样大!

我显然遇到了一些非常错误的事情......

最佳答案

侧边栏菜单元素内有一个未设置样式的无序列表。默认情况下，列表具有边距/填充。添加: