2

私はこのような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-menu35pxsidebar51pxsidebar-menusidebar

私の頭の中では、次のように思います。まあ、margins0であり、0であるため、（コンテナの）をpaddings含む要素は、コンテナと同じ大きさである必要があります。sidebar-menuheight:100%

私は明らかに何か非常に間違っています...

4

2 に答える 2

4

サイドバーメニュー要素内に、スタイルが設定されていない順序付けされていないリストがあります。リストにはデフォルトでマージン/パディングがあります。追加：

ul {
    margin:0;
    padding:0;
}

これで、サイドバーメニューはそのコンテナとまったく同じサイズになります。

デモ

于 2012-07-24T11:27:20.840 に答える
1

特に指定がない限り、親コンテナdivは、相対サイズではなく、絶対サイズを持つ最大の要素に適切にサイズ設定されます。

divsidebar-menuには絶対サイズはありませんが、その子である「One」というテキストの順序付けられていないリストからサイズを決定します。これが原因でsidebar、実際には高さ35ピクセル、幅51ピクセルになり、その子sidebar-menuはその高さと子の幅の100％を埋めます。

于 2012-07-24T11:24:05.273 に答える