Question

我有一个关于CSS的基本问题。假设我将我的BODY标签的高度设置为100％...然后在body标签内我有一个DIV并且DIV可以有许多其他嵌套的DIV。现在我必须为每个DIV指定HEIGHT吗？为什么他们不能通过默认继承父母。

例如..

html, body {
    height: 100%;
}

现在我的HTML是......

<body>
<div id="container">
   <div id="header">
     <div class="header_inner"></div>
     <div class="header_inner"></div>
   </div>
</div>
</body>

所以，我必须指定＆＃34;容器＆＃34;的高度。到100％呢？为什么它不能自动从父（Body）继承？现在说如果我确定了＆＃34;容器＆＃34;是100％，我希望我的标题是＆＃34; 100％＆＃34;同样，那么我必须在＆＃34;标题＆＃34;？

上再做同样的事情

我想问题是......所有HTML元素都需要具有高度＆＃34;指定＆＃34;，它们只能自动从父级继承？

我尝试使用

* {
  height: inherit
}

但不确定这是否是正确的做法？

Answer 1

默认情况下，div不会继承父级的高度。如果要继承高度，则必须在CSS中为div指定。

通常，您必须指定块元素的高度，或者它只能包含其内容所需的高度。

见这个例子：

＆＃13;

.outer {
  background-color: blue;
  height: 100px;
}

.inner-inherit {
  background-color: green;
  height: inherit;
}

.inner-no-inherit {
  background-color: yellow;
}

p {
  margin: 0;
  padding: 0;
}

＆＃13;

<div class="outer">
  <div class="inner-inherit">
    <p>I inherit my height from parent</p>
  </div>
</div>

<div class="outer">
  <div class="inner-no-inherit">
    <p>I am only as high as the text</p>
  </div>
</div>

＆＃13;

嵌套的HTML元素＆amp;高度

1 个答案: