Độ dài văn bản + ô bảng + chiều cao phần trăm - điều gì đang diễn ra ở đây?

Question

Tôi có div sử dụng display: table-cell chứa div con ... cả hai đều sử dụng thứ nguyên dựa trên phần trăm. Khi div con đó chứa nhiều hơn một số lượng văn bản nhất định (tùy thuộc vào kích thước phông chữ), nó bỏ qua quy tắc chiều cao của nó.

Here's an isolated test-case

Nhấp vào "văn bản chuyển đổi" nút sẽ chứng minh vấn đề này. Nó rõ rệt hơn trong Chrome & Safari nhưng Firefox cũng thể hiện sự cố.

Tôi mong đợi chiều cao của .child div là 40px ... nhưng thay vào đó là khoảng 290px (trong Chrome & Safari). Tương tự, .table phải có chiều cao là 240px.

HTML:

<div class="main"> 
    <div class="item"> 
     <div class="table"> 
      <div class="table-cell"> 
       <div class="child"> 
        <div class="child-inner"> 
         <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna, Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

*, 
*:after, 
*:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.main { 
    position: relative; 
    margin: 20px; 
    width: 320px; 
    height: 480px; 
} 

.item { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: #eee; 
    overflow: hidden; 
} 

.table { 
    display: table; 
    position: absolute; 
    top: 2.083333333333333%; 
    left: 50%; 
    height: 50%; 
    width: 50%; 
} 

.table-cell { 
    position: relative; 
    display: table-cell; 
    height: 100%; 
    width: 100%; 
    vertical-align: middle; 
} 

.child { 
    position: relative; 
    overflow: hidden; 
    left: 0%; 
    height: 16.666666666%; 
    width: 93.75%; 
    background-color: rgba(255, 255, 255, 0.5); 
} 

.child-inner { 
    height: 100%; 
    width: 100%; 
    padding: 10px; 
    overflow: hidden; 
    overflow-y: auto; 
} 

p { 
    margin: 0; 
    padding: 0; 
} 

Answer 1

tôi đã cố gắng gói các yếu tố phát triển trong một div đó là sử dụng định vị tuyệt đối, nó dường như có tác dụng bạn đang yêu cầu cho: http://jsfiddle.net/fschwiet/2RgPV/ . Xem div "fixme" đã được thêm vào. Ý tưởng là loại fixme div của con dấu bất cứ điều gì đang xảy ra bên trong nó từ bất kỳ logic bảng sống bên ngoài.

.fixme { 
    position:absolute; 
    top:0px; 
    bottom:0px; 
    right:0px; 
    left:0px; 
    overflow:hidden; 
} 

Answer 2

Có vẻ như phần đệm trên .child-inner đang có ảnh hưởng xấu. Tôi đã loại bỏ phần đệm và bây giờ nó tôn trọng chiều cao. http://jsfiddle.net/cwardzala/Z27S9/1/

.child-inner { 
    height: 100%; 
    width: 100%; 
    /* padding: 10px; */ 
    overflow: hidden; 
    overflow-y: auto; 
}