高度在绝对定位表中不受尊重

  • Z时代
  • 2024-01-10
  • 分类：问答

如果绝对定位的元素具有明确设置的高度，如果内容高度大于提供的高度值，则元素将收缩包裹内容而不考虑高度值。高度在绝对定位表中不受尊重

#main {  
    width: 100px;  
    height: 29px;  
    position: absolute;  
    top: 20px;  
    left: 200px;  
    border: 1px red dashed;  
    display: table;  
    table-layout: fixed;  
    border-spacing: 0;  
    border-collapse: separate;  
}  
#child {  
    display: table-cell;  
}

<div id="main">  
    <div id="child">Custom Text With Validation:</div>  
</div>

回答：

这是不兑现其父出于同样的原因高度我不接受max-height，从而推动该表的尺寸表的单元格。

这里是2种方法来使这个工作，无论是在child

#main {  
    width: 100px;  
    height: 29px;  
    position: absolute;  
    top: 20px;  
    left: 200px;  
    border: 1px red dashed;  
    display: table;  
    table-layout: fixed;  
    border-spacing: 0;  
    border-collapse: separate;  
}  
#child {  
    position: absolute;  
    display: table-cell;  
}

<div id="main">  
    <div id="child">Custom Text With Validation:  
    </div>  
</div>

设置position: absolute或增加额外的元素child内，并设置了height。

#main {  
    width: 100px;  
    height: 29px;  
    position: absolute;  
    top: 20px;  
    left: 200px;  
    border: 1px red dashed;  
    display: table;  
    table-layout: fixed;  
    border-spacing: 0;  
    border-collapse: separate;  
}  
#child {  
    display: table-cell;  
}  
#child div {  
    height: 29px;  
}

<div id="main">  
    <div id="child">  
    <div>Custom Text With Validation:</div>  
    </div>  
</div>

在桌子上添加overflow: hidden也将适当的过剩 “腰斩”。

以上是 高度在绝对定位表中不受尊重 的全部内容， 来源链接： utcz.com/qa/260080.html

回到顶部