如何使以百分比为单位的 div 高度随其内容扩展？答案

【问题标题】：How to make a div height set in pecentage expand with its content?如何使以百分比为单位的 div 高度随其内容扩展？
【发布时间】：2015-08-17 17:08:03
【问题描述】：

我正在设计一个具有 100% 高度部分的布局，并且一直在努力使这些部分在必要时随内容扩展。

我试过height: auto; min-height: 100%;，但它不起作用。

这是一个FIDDLE

【问题讨论】：

您使用的是哪种浏览器？需要满足IE等老浏览器的兼容性吗？
min-height:xx% 需要一个设置了高度的父级。身高同上：xx%；它需要一个有效的值或引用，否则它是 xx% 的东西。使用 display:table，高度会扩大，并且只能在 display:table-parent 上设置，如果只有一行
@sebastienbarbier 好吧，如果这在包括平板电脑和手机在内的所有最新版本的现代浏览器中都不能正常工作，我的客户会不高兴。就 IE 而言，它至少应该支持版本 10 和 11。在此先感谢...
@GCyrillus 在这种情况下，父级不会是 html, body { height: 100%} 吗？高度接缝工作正常，它们的可扩展性是问题。也许我错过了你的意思......
您在单元格内的平均高度不起作用，因为父级（行或表）没有设置高度:)。在 css 中，你已经级联了，并且 height/min-height in % 需要一个父引用来计算；）

标签： html css responsive-design height fullscreen

【解决方案1】：

使用

.wrapper { 
    height: 100vh; /* vh instead of % */
}

出于某种原因 - 我现在没有时间进一步调查 - 只有当我将您的标记减少到相关的最低限度时才能解决它，请参阅小提琴：

https://jsfiddle.net/jt49a064/6/

这应该可以作为您现在自己修复它的起点。

【讨论】：

由于某种原因，这在我的项目中不起作用。还是谢谢你。
即使 you 不能让它在 your project 中工作，我的小提琴证明建议的解决方案解决了 main你的问题的方面。您现在应该愿意自己做一些研究，以找出 your 代码中其他元素的样式，与 your 的 reduced 版本对比i> 代码搞砸了。
我做了研究，当 html 和 body 也设置为 height:100% 时，找不到 height:100vh 和 height:100% 之间的差异，实际上第二个接缝更广泛运动。我投票赞成你的答案，因为它可能对其他人有帮助，但我不能接受它，因为我要求对所提供的布局提供解决方案，而你的方法在其中不起作用，正如你所知道的那样。如果有更好的方法来编码布局，我愿意接受建议。我尝试了使用浮动容器而不是显示的方法，但仍然无法正常工作。我只是在几天没有找到解决方案后才寻求帮助。

【解决方案2】：

这对你有用吗？要自己改变它，你需要使用 auto 而不是 %

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

       .wrapper { 
       width:auto;
        height: auto; 
        background: SkyBlue;
            }

       .container { 
        width: auto; 
        height: auto; 
        background: green;
           }

    .table {
     display: table;
      width: auto;
     height: auto;
            }

          .row {
          display: table-row;
            width: auto;
                 }
      .cell1, .cell2, .cell3 {
            display: table-cell;
            width: 33%;

              }
      .cell1 {
       background: blue;
              }
       .cell2 {
     background: red;
           }
    .cell3 {
    background: LightSalmon;
           }

【讨论】：

谢谢，但不，关键是要有响应式的 100% 高度部分。
你需要所有相同尺寸的部分......你的意思是绿色，红色，蓝色都相同尺寸
我需要的在 Fiddle 中得到了体现。我不知道如何才能更好地解释它。

【解决方案3】：

你可以使用 display: table;并为您的容器提供表格行：

在父级的 CSS 中这样写：

display: parent;

为孩子们：

display: table-row;

【讨论】：

【解决方案4】：

在你的 CSS 中试试这个

display:inline-block;

【讨论】：

我认为这会节省我的时间，但尽管它使容器随着内容而伸展，但它也会导致容器之间的重叠。