Proposal: content-size property

Problem: Make an iframe or object's height expand to the height of its content

Not a solution: height: 100%

This doesn't work as intended because:

1. It's 100% of the frame's parent's height and not the framed
document's height.

2. To make 100% expand to the size of the body (to kind of simulate
that it's the height of the framed document), you have to be in quirks
mode or use relative + absolute positioniing all the way down to the
frame so that the height inheritance actually makes 100% do something
useful. (I don't even remember the correct way to get that effect.)

Better, but still unsatisfactory solution: Use Javascript

Use Javascript load listeners on the framed document (and the initial
load of the main document if needed). Then style the frame's height
with its document.documentElements's offsetHeight as a reference.
<http://www.google.com/search?q=iframe+auto+resize>

It's a pain to get right for every situation (including situations
where the framed document is on a different domain) across all
browsers and it still requires JS.

Real Solution:

Opera supports a CSS -o-content-size property.

You can use it like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            object {
                width: 100%;
                height: -o-content-size;
                display: block;
            }
        </style>
    </head>
    <body>
        <p><object type="text/html" data="content.html">Alternate
content</object></p>
    </body>
</html>

-o-content-size adjusts the object's height to whatever the size of its content.

It's an awesome feature and I'd love to see content-size supported by
all browsers.

(Not sure, but maybe IE, FF and Safari have similar extensions that do this.)

-- 
Michael

Received on Wednesday, 16 July 2008 23:05:17 UTC