Fix table-cell height overflow-y (scroll) in a CSS 3 full page 100% height layout

 

If you are using display: table, display: table-row and display: table-cell in CSS to structure your HTML, then restricting the height of a content cell is difficult. If you want to have a content cell scroll correctly vertically, when the content of a cell exceeds the height of the table, like cell 2 in the following screen dump:

 

image

 

Then you can use a “relative” positioned div inside the table-cell and in the relative positioned div a absolute positioned div. This div should get the overflow-y property, like:

<div class="table" style="height: 100%;">
<div class="row">
<div class="cell" style="border: 1px solid #000000; padding: 10px;">Cell 1</div>
<div class="cell" style="border: 1px solid #000000; padding: 10px;">
<!-- Use inner div's with position relative and absolute, to fix cell height,
making it overflow correctly. -->
<div style="position:relative; height: 100%">
<div style="overflow-y: scroll; position: absolute; top: 0; right:0; bottom: 0; left: 0;">

To see the code live: http://plnkr.co/edit/HWTsCsUpddHP3rZsMUtz?p=preview

Leave a Reply

Your email address will not be published. Required fields are marked *

4 comments

  1. rooban says:

    it works in chrome. Please give me a solution for F*****g IE8 above
    the below way also works fine in chrome, Not in IE
    ==============================================================

    aaaaaaasdasdasdasdasdasddsfsdfsdf

    bbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasdbbbbbasdasd

    Thank you
    Rooban Nadarajah

  2. Travis Wilson says:

    Works great! IE11 included!

  3. Dimitris says:

    Thank you so much! Exactly what I was looking for!
    Dimitris

  4. remo says:

    Thank you so much.. works greatn on IE11, Finally!!