Absolute positioning causes a 100% height container to be displaced from the IE viewport

While my code works seamlessly in Firefox and Safari, Internet Explorer presents a challenge I cannot seem to solve.

The Problem: In non-IE browsers, the container displays properly with space around the edges of the viewport. However, in IE, the container is constrained to a strict 100% height of a parent element which causes it to extend off the bottom of the viewport.

<!DOCTYPE html>
<html>
<title>The Splits</title>
<head>
<style>
html, body {margin:0;padding:0;height:100%;}

html {
    height:auto;
    min-height:100%;
    overflow:hidden;
    }

div#container {
    position:absolute;
    top:50px;
    right:20px;
    bottom:20px;
    width:290px;
    max-height:100%;
    #height:100%;
    }

div#one,
div#two {
    position:relative;
    height:50%;
    overflow:auto;
    }

div#one {background-color:lightgreen;}
div#two {background-color: lightblue;}
</style>
</head>
<body>
    <div id="container">
        <div id="one">top</div>
        <div id="two">bottom</div>
    </div>
</body>
</html>

This code features an absolutely positioned container holding two elements each with a height of 50%.

Here are the requirements:

  1. The container can be positioned anywhere, but must not rely on viewport padding for spacing.
  2. When the viewport size changes, the height of the container's elements must adapt based on a percentage (currently set at 50% each).
  3. This layout should work on IE 7+ and Firefox 3+ at a minimum.
  4. If you find a simple solution, please resist the urge to gloat.

I've experimented with various combinations of positioning and height attributes, but have not found the right solution for IE.

Answer №1

This snippet includes specific code for IE7 compatibility, without affecting other browsers.

<!DOCTYPE html>
<html>
<title>The Splits</title>
<head>
<!-- saved from url=(0014)about:internet -->
<style>
html, body {margin:0;padding:0;height:100%;}

html {
    height:auto;
    min-height:100%;
    overflow:hidden;
    }

div#container {
    position:absolute;
    top:50px;
    right:20px;
    bottom:20px;
    width:290px;
    max-height:100%;
    #height:100%;
    }

div#one,
div#two {
    position:relative;
    height:50%;
    overflow:auto;
    }

div#one {background-color:lightgreen;}
div#two {background-color: lightblue;}
</style>
<!--[if IE 7]>
<style>
div#one,
div#two {
    height:expression(((this.parentElement.offsetHeight-70)/2)+'px');
}
</style>
<![endif]-->
</head>
<body>
    <div id="container">
        <div id="one">top</div>
        <div id="two">bottom</div>
    </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is my column getting devoured even though it has custom content tailored to it?

In my layout, I have one column, one row, and three nested columns. Each column contains a custom-designed button instead of using the default Bootstrap button. However, there seems to be an issue where one of the columns is getting cut off. To better und ...

Prevent horizontal scrolling on mobile devices

To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...

Moving a DOM element within AngularJS to a new location

I have created an angular directive that functions like a carousel. To keep the dom element count low, I delete elements from the dom and then re-insert them using angular.element to select, remove, and insert items as shown below: app.directive('myD ...

Tips for manually adding CSS/JS files for offline usage with Vue.js CLI

I am currently utilizing Vue.js CLI alongside AP.NET Core in a single-page application. I have identified the need to bundle some JavaScript/CSS files locally instead of relying on a CDN due to potential deployment scenarios without internet access. The co ...

Streamlining Tailwind CSS styles in your React/Next.js components for maximum efficiency

Since implementing Tailwind CSS in my React/Next.js project, I've noticed a decrease in maintainability compared to using traditional CSS or styled-components. Previously, I could easily consolidate style changes, but now I find myself duplicating cla ...

An even flexbox grid featuring content of varying sizes and dividers

I am currently in the process of working on a .psd template and utilizing Bootstrap 4. I have encountered an issue with one section that contains multiple rows and columns with varying content. The main problem is with one column where the text inside the ...

Designing a custom CSS for enhancing the look of the orchard menu

Right now, I am in the process of implementing a layout that is already established in an MVC4 project. I am facing challenges in figuring out how to create a custom menu in the latest version of Orchard (using the source version so it runs in Visual Stud ...

Adjust the height of the tabs bar in the Guake terminal

Is there a way to reduce the height of the tabs bar in the Guake terminal? I found a solution for GNOME terminal on this post, where they mentioned editing ~/.config/gtk-3.0/gtk.css. Is there a similar method for achieving this in Guake terminal? ...

Execute JavaScript function after the reset button has been clicked

Is there a way to execute a function right after the form elements are reset by the <input type="reset"/> button? ...

How can I design an avatar image within a button similar to Facebook's style?

I'm currently working on a project that involves adding an avatar and a dropdown menu for account settings to my navigation bar. I've already created the dropdown, but I'm having trouble styling the avatar within the button. The button is ta ...

Gradually make the table row and its contents disappear as you scroll, based on how hidden the row is within the containing div

Uncertainty clouds my mind as to the practicality of this approach, the potential performance implications, and the frequency of scroll events firing to make this technique viable. Nevertheless, within a fixed height div (overflow-y: auto) lies a table. M ...

Exploring jQuery Animation Effects: Enhancing Your Web Experience with Zoom In and Zoom Out

Is there a way to animate a logo using jQuery automatically upon page load? I want the image to zoom out, then zoom in and change to a different image. Can someone please assist me with this task? Below is the code snippet that I have: $(document).ready ...

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

Text Separation Within a Singular JSON Object

Currently, I am offering my assistance as a volunteer to develop a fast AngularJS App for a non-profit organization. Although I have successfully set up Angular, the main issue I am encountering has to do with parsing JSON data. The JSON object that I am ...

Arrangement featuring two distinct types of tiles

Looking for a way to achieve this layout using just CSS or a combination of CSS and a little JS. Click on my avatar to see the reference image enlarged =) I've tried using floats and display options but haven't been successful. Take a look at htt ...

What is the simplest method for transferring data to and from a JavaScript server?

I am looking for the most efficient way to exchange small amounts of data (specifically just 1 variable) between an HTML client page and a JavaScript server. Can you suggest a script that I can integrate into my client to facilitate sending and receiving d ...

How can I address the variations in CSS appearance between Firefox and Google Chrome?

I'm currently working on a table with two cells in each row just for fun. For the first row, I want both cells to display the same picture. To achieve this, I wrote the following CSS: tr:nth-child(1){ background-image:url("cat.jpg"); background-size: ...

Assistance needed with CSS selectors for implementing with selenium

<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div> In relation to selenium, what do the following terms refer to in the above code snippet? attribute element value text label I often fin ...

The PHP random number generator appears to be malfunctioning when being compared to the $_POST[] variable

In this section, random numbers are generated and converted to strings. These string values are then used in the HTML. $num1 = mt_rand(1, 9); $num2 = mt_rand(1, 9); $sum = $num1 + $num2; $str1 = (string) $num1; $str2 = (string) $num2; The following code ...

Calculating the time gap between two consecutive "keyup" occurrences

I am in need of creating a basic point of sale system using Javascript. I have a barcode scanner that functions like a keyboard. My goal is to automatically identify when the input is coming from the barcode scanner and then generate a report with the sc ...