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

4 Comments

  1. rooban

    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

Leave a Reply

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