gleerman gleerman - 1 month ago 15
CSS Question

CSS display:table for filling height. Different in Chrome/Safari vs Firefox/Opera

Using the

display:table
and
display:table-row
CSS attributes, I want my content to fill the remaining available height of a div. In case the content exceeds the available height, I want a scrollbar to be shown.

Here's the fiddle: http://jsfiddle.net/3HYJx/2/

The behaviour as shown in Google Chrome and Safari is the one I'm trying to achieve. However, Firefox and Opera show it differently. Haven't tried IE yet, but fearing the worst.

Why is this behaviour so different? And even better: how can I achieve what I want (as shown in Chrome) in every browser?

Thanks a lot in advance.




Chrome and Safari:

Chrome/Safari sample

Firefox and Opera:

Firefox/Opera sample

Answer

Using the table display properties, you you could overcome the firefox problem by wrapping two more elements around the text of the scrolling section, so you have three:

  • the outer one is a table-row container that fills the rest of the table
  • inside which we have an relatively positioned container with hight and width set to 100%, and with set vertical scrolling overflow-y:scroll;
  • the innermost container is absolutely with hight and width also set to 100%

So here i just quickely added two div containers around your content paragraph (you could probably found a more appropriate set of containers according to your needs, but this will do for the illustration):

<div id="wrapper">
    <h2 id="date">Date</h2>
    <h1 id="title">A title ...</h1>
    <div id="contentbox-outer">
        <div id="contentbox-inner">
            <p id="content">The content ...</p>
        </div>
    </div>
</div>

And your whole CSS has to be modiffied. Your original selectors, with slight modofications:

#wrapper {
    position:absolute;
    display: table;
    table-layout:fixed;
    background-color:black;
    padding:10px;
    width: 250px;
    height:350px;
    border-spacing:20px;
}

#date {
    display: table-row;
    font-weight: normal;
    font-size: 25px;
    background-color:yellow;
}

#title {
    display: table-row;
    font-weight: normal;
    font-size: 40px;
    line-height:90%;
    background-color:blue;
}

note that the table-row and table elements take now speciffinc styling for tables, like the border-spacing property that sets spacing between the table rows, and this you can now combine with the padding property of the table for the appearance you want.

And the styling for the added containers would be something like this (first is still based on your styling, the last two are the additional - inner ones):

#contentbox-outer {
    display: table-row;
    font-size: 12pt;
    width: 100%;
    height:90% !important;
    text-align: justify;
    background-color:red;
    overflow-y: scroll;
}
#contentbox-inner {
    position:relative;
    height:100%;
    width:100%;
    overflow-y:scroll;
}
#content {
    position:absolute;
    height:100%;
    width:100%
}

I also updated your fiddle for a quick check: http://jsfiddle.net/3HYJx/7/

Edit: This works in browsers like Firefox, Chrome, Safari, but for example not in Opera cause hight:100%; does not get rendered in documents in strict mode. So with a little more research I found out that you can get it to work in quirks more, here is a test html - the above code but in a quirks mode document. Thanks for giving me a reason to learn that, it's good to know =)