CODEWITHSUNDEEP
htmlcssinternet-explorerlayoutinternet-explorer-8
EricG
EricG

Reputation: 3849

IE8 remaining height

I'm aiming for a structure like this in IE8 (&IE9).
Dont want to use JavaScript, because some 3rd party is dynamically inserting Content, which should only result in a different scrollbar scale.

I have been searching for "plenty" of time, i.e. quite a lot of time. I have failed to understand and/or use the following thread. StackOverflow: make-iframe-to-fit-100-of-containers-remaining-height

<!DOCTYPE html>
<html>
    <body>
        <p>Some text with unknown height, fixed at the top.</p>
        <div>
            Some content that will not exceed the body (100% height),
            but will fill the body until the content is too long, which would give
            a scrollbar.
        </div>
    </body>
</html>

I'm able to achieve this in Chrome (pic=whole browser content), fiddler at the bottom:

Chrome example

IE8/9 gives me this (pic=whole browser content, again scrolled to the bottom of the body):

IE messes up

Chrome's fine, fiddler.

Who's able to help me out?

Upvotes: 0

Views: 195

Answers (2)

EricG
EricG

Reputation: 3849

Being tired of not accomplishing what I wanted, I was forced to use JS after all (I realize nobody could have successfully answered my question indeed, and this solution isnt either what I actually asked).

JSfiddle

The fiddle is more complex than what is shown below, because I need this extra stuff.

function adjustHeight() {

    var header = document.getElementById("header");
    var container = document.getElementById("container");

    container.style.top = header.clientHeight + "px";
}

// Note the place of the method invocation ('asap'), adjustHeight()
<body>
    <div id="header">
        <p id="p">
            Line1<br/>
            Line2<br/>
            Line3<br/>
            Line4<br/>
        </p>
        <div id="toggle">Toggle</div>
    </div>
    <div id="container">
        <script>adjustHeight();</script>
        <div id="content">
            First row visible<br/><br/>
            Scrollbar shows normally<br/>
            Body doesnt scroll<br/>
            Works on resize too (by default)<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/>
            One row..<br/><br/>

            Last row visible on collapsed/expanded
        </div>
    </div>
</body>

Upvotes: 1

on_
on_

Reputation: 554

I see you are using a div here not an iframe, here is a fiddle that should work. using positioned elements.

position:absolute;
bottom:0px;
top:80px;
left:0px;
right:0px;

http://jsfiddle.net/XQbzy/1/

Upvotes: 0

Related Questions