如何将父元素的高度设置为与子元素相同的高度？

Question

请看看这个：

label{
   margin-top: 15px;
    margin-left: 4px;
    float: left;
}
span{
    overflow: hidden;
    display: block;
}

.w{
   position: relative;
   border: 1px solid red;
}

.c{
    position: absolute;
    border: 1px solid green;
    border-top: none;
    max-height: 200px;
    background-color: white;
    width: 100%;
    overflow-y: auto;
}

ul{
     margin: 0;
    margin-bottom: 5px;
    padding: 0px;
}

li{
      color: #888;
    padding: 2px 15px 0px 15px;
    font-size: 12px;
    line-height: 2;
    font-family: IRANSans, tahoma;
    display: flex;
}

<label for="name">title</label>
<span>
  <div class="w">
    <div class="c">

      <ul>
        <li>whatever</li>
        <li>whatever</li>
      </ul>

    </div>
  </div>
</span>

现在，请在height: 60px;元素中添加.w。然后，您将看到一些内容。我想使.w的高度与.c相同。我怎样才能做到这一点？请注意，.c的高度不是参赛者。其内容将被更改。

Answer 1

这是CSS中的默认行为，您可能希望简化代码。

您是要设置.w的高度并调整.c还是进行其他调整？您说设置.w的高度，然后说将.w更改为.c的高度。

.c是绝对的，而.w是相对的，因此使用.c { height: 100% }可以达到您想要的效果。

Answer 2

您做错的第一件事是将' block '元素放入' inline '元素。我强烈建议您了解它们。

当您将'postion：ablsolute'赋予元素时，它将脱离页面中的html-tag流。因此，使用您给父div（.w）提供的“相对位置”，父div开始识别它。但是其他div看不到它。因此，对于您的情况，我有以下解决方案：

**给出“位置：相对于”您的“ 跨度”的位置，这样它也可以看到您的 .c 块，然后给您的“最小高度” .w 块，然后为.c块计算“最小高度”（添加无限的子代且不破坏代码）或“高度”（与父代获得相同的高度）。删除边框或减去边框的宽度。 **

label{
   margin-top: 15px;
    margin-left: 4px;
}
span{
  position:relative;
    display: block;
}

.w{
   position: relative;
   display:block;
   overflow-y: auto;
   border: 1px solid red;
   min-height: 120px;
}

.c{
    position: absolute;
    border: 1px solid green;
    border-top: none;
    background-color: white;
    
    min-height:calc(100% - 1px); /*Subtract border-bottom-width*/
    width: calc(100% - 2px); /* Subtract border-left/right-width*/
}

ul{
     margin: 0;
    margin-bottom: 5px;
    padding: 0px;
}

li{
      color: #888;
    padding: 2px 15px 0px 15px;
    font-size: 12px;
    line-height: 2;
    font-family: IRANSans, tahoma;
    display: flex;
}

<label for="name">title</label>
<span>
  <div class="w">
    <div class="c">

      <ul>
        <li>whatever</li>
        <li>whatever</li>
        <li>whatever</li>
        <li>whatever</li>
        <li>whatever</li>
        <li>whatever</li>
        <li>whatever</li>
        <li>whatever</li>
        <li>whatever</li>
        <li>whatever</li>
      </ul>

    </div>
  </div>
</span>