Question

当您为div设置宽度/高度为100％时，它们应该采用其父元素的尺寸。

我看到的是宽度但不是高度的情况。有问题的元素是这样的，fm是父，fm_xxx是孩子。

#fm{
  position:  relative;
  text-align: left;
  width: 370px;
  height: 100%;
}
#fm_tags{
  position:  relative;
  width:  100%;
  height: 100%;
}
#fm_arcmarks{
  margin-top:10px;
  position:  relative;
  width: 100%;
  height: 100%;
  clear:  both;
}
#fm_space{
  height:  10px;
  width: 100%;
  height: 100%;
  clear:  both;
}

这个html

<div id = 'fm'>
  <div id = 'fm_tags'></div>
  <div id = 'fm_space'></div>
  <div id = 'fm_arcmarks'></div>
</div>

要查看代码，请访问：

https://frozen-dusk-2587.herokuapp.com/

并点击 FAVS

Answer 1

有两种方法可以在CSS中使高度工作。

对于正常情况下的元素＆＃34; flow＆＃34;在文档中，高度需要一直设置为包括HTML元素。

在您的代码中，您已将主#fm div的高度设置为100％，但是100％是什么？百分比始终基于父元素，并且您的代码未显示在#fm的父元素上设置的高度

添加：

 html, body {height:100%;}

到您的代码，它将工作。 但请注意，在下面的代码段中，我已将子div元素更改为33%的高度，而不是您最初拥有的100%。这样每个人占据父亲div的1/3，占父母（身体）身高的100％，占其父（html）身高的100％：

＆＃13;

html, body {height:100%;}
div {border:1px solid black; }
#fm{
  position:  relative;
  text-align: left;
  width: 370px;
  height: 100%;
}
#fm_tags{
  position:  relative;
  width:  100%;
  height: 33%;
}
#fm_arcmarks{
  margin-top:10px;
  position:  relative;
  width: 100%;
  height: 33%;
  clear:  both;
}
#fm_space{
  height:  10px;
  width: 100%;
  height: 33%;
  clear:  both;
}

＆＃13;

<div id = 'fm'>div
  <div id = 'fm_tags'>div</div>
  <div id = 'fm_space'>div</div>
  <div id = 'fm_arcmarks'>div</div>
</div>

＆＃13;

将元素从正常＆＃34;流程＆＃34;中取出。这可以通过float:value或设置position:absolute或position:fixed来完成。它也适用于<table>和<tr>元素（作为特殊情况）。

当元素从文档的正常流程中取出时，它们的父元素不再包含它们，因此父元素高度不再重要，元素现在可以自由使用您指定的高度。

Answer 2

看起来你需要设置

body_main至height: 100%

因为我检查了您的开发网站上的调试器，html和body已经设置为100％。

整个链必须设置为100％。所以当你在高度链中省略body_main时。它失去了它的高度，它的子元素也是如此。

为什么这些儿童元素不会占据父母的高度？

2 个答案: