Height that is left unused in Internet Explorer 8

Question

Height that is left unused in Internet Explorer 8

I am striving for a layout similar to this in IE8 (&IE9).
I prefer not to use JavaScript, as some external entity is injecting content dynamically, which should only result in a different scrollbar scale.

I have spent a considerable amount of time searching for a solution. Unfortunately, I have been unsuccessful in comprehending or implementing the guidance provided in this 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 have successfully achieved this in Chrome (see image = entire browser content), with the fiddler positioned at the bottom:

However, in IE8/9, I encounter this issue (see image = entire browser content, once again scrolled to the bottom of the body):

Chrome works perfectly fine in the fiddler example.

If anyone can offer assistance, it would be greatly appreciated.

html css internet-explorer layout internet-explorer-8

Answer 1

Answer №1

Feeling frustrated by my lack of progress, I finally resorted to using JavaScript (as no one seemed able to provide a satisfactory answer to my question, and this solution isn't exactly what I was looking for).

JSfiddle

The JSfiddle showcases a more intricate code than what is displayed below as it includes additional elements that are necessary.

function adjustHeight() {

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

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

// Take note of the method invocation location ('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 doesn't scroll<br/>
          Works on resize too (by default)<br/>
            [Additional content truncated for brevity]
          Last row visible on collapsed/expanded
      </div>
  </div>
</body>

Answer 2

Feeling frustrated by my lack of progress, I finally resorted to using JavaScript (as no one seemed able to provide a satisfactory answer to my question, and this solution isn't exactly what I was looking for).

JSfiddle

The JSfiddle showcases a more intricate code than what is displayed below as it includes additional elements that are necessary.

function adjustHeight() {

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

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

// Take note of the method invocation location ('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 doesn't scroll<br/>
          Works on resize too (by default)<br/>
            [Additional content truncated for brevity]
          Last row visible on collapsed/expanded
      </div>
  </div>
</body>

Answer 3

Answer №2

It appears that you have opted for a div instead of an iframe, and I recommend using positioned elements as shown in this fiddle.

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

http://jsfiddle.net/abc123/1/

Answer 4

It appears that you have opted for a div instead of an iframe, and I recommend using positioned elements as shown in this fiddle.

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

http://jsfiddle.net/abc123/1/

Height that is left unused in Internet Explorer 8

Answer №1

Answer №2

Similar questions

I am looking to modify the anchor link and image source using JQuery based on the specific div ID

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Generate a random post on a Blogger page upon loading instead of clicking on it

The issue with implementing simple getElementsByClassName JavaScript in the footer of a WordPress site persists

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

The horizontal rule element is not displaying

Adding the Font Awesome fa-angle-right icon to a custom Bootstrap carousel: A step-by-step guide

Automating the process of uploading a file to a Github repository using JavaScript and HTML

I'm having trouble figuring out the issue with the HTML code I wrote to include a favicon on my website

Addressing rendering problems in Ag-GRID when used with Angular

Struggling with html code?

Require a selection from the menu on the right side needed

What methods can I use to display or conceal certain content based on the user's location?

What is the best way to manage fonts in bootstrap-sass and compass? Are there any specific guidelines for properly integrating fonts into a webpage?

Animating elements with folding effects using CSS transforms

Using Javascript/JQuery to attach a javascript object to a form in order to perform a traditional form

What is the best way to assign a unique color to each circle?

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

Troubleshooting: jQuery Drop event is not triggering

Ways to determine if an element is the initial child