高度在絕對定位表中不受尊重

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也將適當的過剩 「腰斬」。