找出CSS中的高度

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%應為容器的height:100% （我認為是容器的height:100% ），應與容器一樣大！

我顯然弄錯了...

Answer 1

您在sidebar-menu元素內有一個未排序的列表，尚未設置樣式。 默認情況下，列表具有邊距/填充。 加：

ul {
    margin:0;
    padding:0;
}

現在，邊欄菜單與其容器的大小完全相同。

演示

Answer 2

除非另有說明，否則父容器div會將其自身大小調整為具有絕對大小而非相對大小的最大元素。

div sidebar-menu沒有絕對大小，但是從其子級（帶有文本“ One”的無序列表）確定其大小。 正因為如此， sidebar實際上將自身調整為35px高和51px寬，然后其子sidebar-menu將填充該高度和其子寬度的100％。

找出CSS中的高度

問題描述

2 個解決方案

解決方案1
4 2012-07-24 11:27:20

解決方案2
1 已采納 2012-07-24 11:24:05

找出CSS中的高度

問題描述

2 個解決方案

解決方案1 4 2012-07-24 11:27:20

解決方案2 1 已采納 2012-07-24 11:24:05

解決方案1
4 2012-07-24 11:27:20

解決方案2
1 已采納 2012-07-24 11:24:05