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

Question

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

#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>

Answer 1

这是不兑现其父出于同样的原因高度我不接受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也将适当的过剩 “腰斩”。