0

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?

Community
  • 1
  • 1
EricG
  • 3,788
  • 1
  • 23
  • 34
  • 2
    Unless something has changed since I answered [this question](http://stackoverflow.com/questions/10294543/overflow-with-absolute-relative-positioning-layout/10297421#10297421), I don't think it's possible in IE8 without a little JavaScript. – thirtydot Nov 23 '12 at 11:55
  • That might involve making a resize handler if the page resizes which might cause the white area to wrap.. :/ – EricG Nov 23 '12 at 12:43
  • I wasn't suggesting that as an answer to your question. I meant that I remember while attempting to answer that question trying everything under the sun to make something in IE8 that is equivalent to the problem you're trying to solve. – thirtydot Nov 23 '12 at 12:50
  • possible duplicate of [Div height 100% excluding header](http://stackoverflow.com/questions/8172102/div-height-100-excluding-header) – Peter O. Nov 23 '12 at 19:39
  • @Peter O., that post has no dynamic header-height. – EricG Nov 26 '12 at 10:28
  • @thirtydot, Vote for having had to find out that JS was required (snif..) – EricG Nov 26 '12 at 10:29

2 Answers2

1

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>
EricG
  • 3,788
  • 1
  • 23
  • 34
0

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/

on_
  • 556
  • 5
  • 12