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

css, firefox, google-chrome

Solution

Using the table display properties, 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 a relatively positioned container with `height` and `width` set to `100%`, and with set vertical scrolling `overflow-y:scroll;`

- the innermost container is absolutely with `height` and `width` also set to `100%`

So here I just quickly 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 modified. Your original selectors, with slight modifications:

#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 `height: 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 mode, 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 =)

Problem

Original source