17 June, 2014
6 Comments
1 category
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:
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
Category: Uncategorized
6 Replies to “Fix table-cell height overflow-y (scroll) in a CSS 3 full page 100% height layout”
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
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
Works great! IE11 included!
Thank you so much! Exactly what I was looking for!
Dimitris
Thank you so much.. works greatn on IE11, Finally!!
I tried this in Firefox Quantum 57.0.4 and the text in the scrollable cell is not shown. What could be the problem?
For Firefox Quantum, remove . It will be fine in all browsers