Question

我有这样的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%（容器为{1}} ，我想），应该和集装箱一样大！

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

Answer 1

您在sidebar-menu元素中有一个无序列表，该列表尚未设置样式。列表默认具有边距/填充。添加：

ul {
    margin:0;
    padding:0;
}

现在侧边栏菜单与容器的大小完全相同。

Demo

Answer 2

除非另有说明，否则父容器div会将其自身适当调整为具有绝对大小而非相对大小的最大元素。

div sidebar-menu没有绝对大小，但是从其子级（带有文本“One”的无序列表）确定其大小。正因为如此，sidebar实际上将自己的大小设置为35px高和51px宽，那么它的子sidebar-menu将填充该高度的100％和其子宽度。

确定CSS中的高度

2 个答案: