为什么 height:auto 大小适合子内容并 display:inline 大小适合祖父母？答案

【问题标题】：Why does height:auto size to the child content and display:inline size to the grandparent?为什么 height:auto 大小适合子内容并 display:inline 大小适合祖父母？
【发布时间】：2016-09-01 22:05:29
【问题描述】：

如果父元素的高度为 auto，则高度为 100% 的子元素将按子内容调整大小。

示例：

html, body{  height:100%;  padding:0;  margin:0;}
.grandParent{
  background-color:red;  
  height:100%;
}

.parent{
  background-color:blue;
  height:auto;
}

.child{
  background-color:green;
  height:100%;
}

<div class="grandParent">  
  <div class="parent">
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

但是，如果您将父元素设置为 display:inline，则高度为 100% 的子元素将大小为祖父元素的 100%。

示例：

html, body{  height:100%;  padding:0;  margin:0;}

.grandParent{
  background-color:red;  
  height:100%;
}

.parent{
  background-color:blue;
  display:inline;
}

.child{
  background-color:green;
  height:100%;
}

<div class="grandParent">  
  <div class="parent">
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

为什么 height:auto 调整到子内容的大小而 display:inline 调整到祖父母的大小？

【问题讨论】：

我认为在设置百分比高度时内联元素会被完全忽略，因此子元素会查看下一个块级父元素是什么，然后将其高度设置为任何值

标签： html css

【解决方案1】：

height: auto 给 div 内容的高度。因此，如果您有一行代码，它将具有 20px 高度，但如果您有两行代码，高度将是该代码的两倍。

在heightauto中浏览器计算高度。

【讨论】：