Geek Answers Handbook

CSS mapping table does not consider fixed height

I have this CSS layout, which is necessary, cannot be changed, so it retains its average centering.

Div display:table(height defined) with one div inside display:table-cell, both vertical-align:middle;(I use this to center the content vertically). The problem is that when the content overflows a certain height, it just overflows the table, making it bigger.

I need to install something like overflow:hiddenthat that doesn't seem to work with tables ... I just need to hide the overflowing content or better, add scroll to the table. Is there any way?

CSS

html,body {
  height: 100%;
}
.table {
  float:left;
  margin: 10px;
  display:table;
  height:500px;
  vertical-align:middle;
  background:#ccc;
}
.table-cell {
  vertical-align:middle;
  display:table-cell;
}

HTML

<div class="table">
  <div class="table-cell">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
  </div>
</div>
<div class="table">
  <div class="table-cell">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
  </div>
</div>

Codepen: http://codepen.io/anon/pen/lytea

+4
2

, max-height 100%, height: inherit table-cell.

html,body {
  height: 100%;
}
.table {
  float:left;
  margin: 10px;
  display:table;
  height:500px;
  vertical-align:middle;
  background:#ccc;
}
.table-cell {
  height: inherit;
  vertical-align:middle;
  display:table-cell;
}
.wrapper {
  border: 1px dotted blue;
  display: inline-block;
  max-height: 100%;
  overflow: auto;
}
<div class="table">
  <div class="table-cell">
    <div class="wrapper">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
</div>
    </div>
</div>
<div class="table">
  <div class="table-cell">
    <div class="wrapper">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
      </div>
  </div>
</div>
Hide result
+5

text-overflow: ellipsis; .table-cell,

white-space: nowrap;
overflow: auto;
text-overflow: ellipsis;

css

P.S. text-overflow: ellipsis; white-space overflow.

overflow auto, scroll hidden.

+1

More articles:


All Articles