overflow-y inside iframe_问答_开发者_运维开发者技术经验分享

What I am trying to achieve is to have a scrollable, auto-re-sizable div inside an iframe.

The problem is that iframe, unlike a div, has a scroll in itself, therefore the overflow-y property of my div is ignored, and entire content of my div is displayed, instead of a just a small portion.

The best explanation is a sample, which you can view by clicking http://www.alocet.com/VictorsTestFolder/Sample/Default.html

When I've added CS开发者_高级运维S "html,body,form{ height:100%; margin:0px; padding:0px;}" to IFrame page, it almost worked, but unfortunately I wasn't able to get rid of duplicate scroll-bars.

Any suggestions?

I'm going to go out on a limb and say that you can't really do the thing you want to do without JavaScript.

Divs just don't work like that. They typically overflow as far as needed, spilling wherever. The only way to keep a div from being sized according to its contents (I'm speaking on experience) is to give it an explicit height. Otherwise, it will either spill out of its container or, if its container is its own block formatting context, cause its container to start scrolling.

The iframe appears to be its own context. Thus, you MUST set an explicit height if you want the div it contains to keep itself compact. Two options I see:

You can add a parameter for the server to change the page's height:

<iframe src="Default_files/IFrame2.htm?h=400"

~~Then, create a containing div for the whole page with a fixed height that fits within the iframe. Everything inside of it should flow properly.~~ Then, set the div that might have a lot of content to a fixed size.

The other option is to use JavaScript, which I think can obtain exactly the variables you're looking for using document.documentElement.clientWidth. See this article for more details. Even in this case, you still end up setting the framed page to a fixed height.

Both methods are sketchy workarounds, but I'm somewhat confident you can't do what you want with just CSS.

whats wrong with your 3rd example? you have a fixed size iframe and the div inside still has a scroll bar.

Also what do you mean by scrollable, auto-re-sizable div surely if it is auto resizing it won't be having a scroll bar?

otherwise I'd suggest using a div inside a div and you will have a lot more control and your content will still be showing on search engines.

So implementation of a simple javascript that executes onload solved my problem... well, partially, since if you have a table inside a fixed height div, it goes over the specified div height... so I am trying to find a solution for this problem now...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style type="text/css">
            html, body, form
            {
                margin: 0px;
                padding: 0px;
            }

        </style>
        <script type="text/javascript" language="javascript">
            window.onresize = doResize;
            window.onload = doResize;
            function doResize() {
                document.getElementById("popupHeight").style.height = (window.innerHeight - 40) + 'px';
            }
        </script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="popupHeight">
            Text before the div
            <br />
            <div runat="server" id="tblTabGroups" style="overflow-y: scroll; height: 100%;">
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            scrollable<br />
            </div>
            Text after the div
        </div>
        </form>
    </body>
    </html>