Question

我正在处理100％高度部分的布局，并且一直在努力使这些部分在必要时随内容扩展。

我已经尝试height: auto; min-height: 100%;，但它无法正常工作。

这是 FIDDLE

Answer 1

使用

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

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

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

这应该是您自己解决问题的起点。

Answer 2

在你的css中尝试这个

display:inline-block;

Answer 3

这对你有用吗??要改变它本身你需要使用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;
           }

Answer 4

你可以使用display：table;和容器的表格行：

在父母的CSS中写下：

display: parent;

对于孩子们：

display: table-row;

如何设置以百分比设置的div高度随其内容扩展？

4 个答案: