CSS div高度：100％不适用于display：table-cell;

在本文中，我们将介绍CSS中一个常见问题：当使用display: table-cell时，div的高度为100％不起作用的情况。

阅读更多：CSS 教程

问题描述

在CSS中，我们可以使用”display”属性来控制元素的布局方式。其中，”display: table-cell”可以将一个元素作为表格中的单元格。而当我们想要设置这个单元格的高度为父元素高度的百分之百时，常常会遇到一个问题：div的高度为100％不起作用。

问题分析

要理解为什么div的高度为100％不起作用，我们需要先了解一下CSS中的盒模型。在CSS中，一个元素的总高度由四个部分组成：元素内容的高度（content）、内边距的高度（padding）、边框的高度（border）以及外边距的高度（margin）。因此，当我们设置一个元素的高度为100％时，实际上是将元素内容的高度设置为父元素高度的百分之百。

然而，当我们给一个元素应用”display: table-cell”属性时，该元素会被当作表格单元格进行布局。表格单元格的高度是由内容决定的，而不受盒模型中的其他部分的影响。这就意味着，当我们将一个元素设置为”display: table-cell”时，元素的高度将不再受到父元素高度的限制，也就无法利用”height: 100%”来设定。

解决方法

为了解决这个问题，我们可以采用其他的CSS技巧进行布局。

方法一：使用表格布局

一种解决方法是使用真正的表格进行布局。将需要设置高度为100％的div包裹在一个table元素中，并将其设置为”display: table”，然后将父元素的高度设置为100％，再将div的高度设置为100％。这样，就可以实现div的高度为100％并与父元素保持一致。

<div style="display: table; height: 100%;">
  <div style="display: table-cell; height: 100%;">
    <!-- Your content here -->
  </div>
</div>

方法二：使用flexbox布局

另一种解决方法是使用flexbox布局。将父元素的布局方式设置为”display: flex”，然后将子元素的高度设置为100％。

<div style="display: flex; height: 100%;">
  <div style="height: 100%;">
    <!-- Your content here -->
  </div>
</div>

方法三：使用绝对定位

还有一种解决方法是使用绝对定位。将父元素的position属性设置为”relative”，然后将子元素的position属性设置为”absolute”，并将其宽度和高度设置为100％。

<div style="position: relative; height: 100%;">
  <div style="position: absolute; width: 100%; height: 100%;">
    <!-- Your content here -->
  </div>
</div>

示例

以下是一个使用表格布局解决问题的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .table-wrapper {
        display: table;
        height: 100%;
      }
      .table-cell {
        display: table-cell;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="table-wrapper">
      <div class="table-cell">
        <!-- Your content here -->
      </div>
    </div>
  </body>
</html>