Mam div przy użyciu display: table-cell
, który zawiera div child ... oba wykorzystują wymiary oparte na wartości procentowej. Kiedy ten element div zawiera więcej niż określoną ilość tekstu (w zależności od rozmiaru czcionki), ignoruje regułę wysokości.Długość tekstu + komórka tabeli + wysokość procentowa - co tu się dzieje?
Kliknięcie przycisku "przełącz tekst" zademonstruje problem. Jest bardziej wyraźny w przeglądarce Chrome, ale Firefox również wykazuje ten problem.
Spodziewam się, że wysokość div div wynosząca .child
to 40px ... ale zamiast tego ma ona około 290px (w przeglądarce Chrome & Safari). Podobnie, .table
powinna mieć wysokość 240 pikseli.
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;
}
Czy istnieje powód, dla którego chcesz użyć 'display: table'? –
http://jsfiddle.net/XuxCT/1/ tak bym zrobił twój kod CSS i HTML, nadal może być lepszy, ale powinien działać we wszystkich przeglądarkach. –
wyświetlacz: tabela b/c Potrzebuję wspierać pionowe wyrównanie elementów potomnych – busticated