如果使用HTML5文档类型，为什么不能将div的高度设置为100％？如何获得100％的高度

Question

我正在为一个非常简单的库webapp进行布局排序，但是当我使用HTML5
doctype声明时，我的某些div的高度（即100％）会缩小，而我似乎无法保持饱满他们使用CSS进行备份。

• 如果我删除HTML5 doctype声明，则一切都如我所愿，但我确实想使用正确的HTML5 doctype声明。
• 如果我将doctype设置为HTML5并且未进行任何更改，则包含照片的div和页脚div将不可见，可能是因为它们的高度为0px。
• 如果我将doctype设置为HTML5并使其body { height: 100px }和.container { height: 100px }或.container { height: 100% }变为可见，但我需要的是全高而不是像素高度。
• 如果我尝试执行与上述相同的操作，但body { height: 100% }照片和页脚div不再可见。

我需要怎么做才能使其具有100％的高度，以便我的照片和页脚div达到全高？

Answer 1

仅当父元素具有定义的高度（即，不是的值）时auto。如果高度为100％，则还必须定义父级的父级高度。这可以一直到html根元素。

因此，将html和body元素的高度100%以及您希望首先拥有的元素的每个单个祖先元素设置为100% height。

请看以下示例，使其更清晰：

html, body, .outer, .inner, .content {

  height: 100%;

  padding: 10px;

  margin: 0;

  background-color: rgba(255,0,0,.1);

  box-sizing: border-box;

}


<div class="outer">

  <div class="inner">

    <div class="content">

      Content

    </div>

  </div>

</div>

如果我不给100％的钱，这是行不通height的-say html元素：

body, .outer, .inner, .content {

  height: 100%;

  padding: 10px;

  margin: 0;

  background-color: rgba(255,0,0,.1);

  box-sizing: border-box;

}


<div class="outer">

  <div class="inner">

    <div class="content">

      Content

    </div>

  </div>

</div>

… 要么 .inner

html, body, .outer, .content {

  height: 100%;

  padding: 10px;

  margin: 0;

  background-color: rgba(255,0,0,.1);

  box-sizing: border-box;

}


<div class="outer">

  <div class="inner">

    <div class="content">

      Content

    </div>

  </div>

</div>