Home/ Questions/Q 6117599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:20:22+00:00

Let’s say I have to following code – <body> <div id=outerdiv style=border: 1px solid

  • 0

Let’s say I have to following code –

<body>
<div id="outerdiv" 
    style="border: 1px solid blue; height: 150px; width: 150px;">
    <div id="div" style="height: 100%; border: 1px solid black; margin: 5px;">
        <div id="innerdiv" style="height: 100%; 
             border: 1px solid red; margin: 5px;">
    </div>
</div>
</body>
</html>

This yields the following result in FF/Chrome:

ruroh

In IE, it’s fine. The question is, how do I use ‘height:100%’ so it looks the way IE renders it in all browsers?

EDIT: Here is the result in IE9 (for me)
This is what I would like it to look like in all browsers using height: 100%.
Is that even possible?

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m getting what looks like the first image on my copies of Safari 5.0.4, Chrome 13.0.782.41, and FF 3.5. Which is the expected behavior, but I’m not sure why Gaby and Yanir are seeing otherwise.

    An alternate approach to setting height:100% would be to set the top, left, right, and bottom values in a few absolutely positioned divs, like so:

    <div id="outerdiv" 
style="border: 1px solid blue; height: 150px; width: 150px; position:relative;">
<div id="div" style="border: 1px solid black; top: 5px; bottom: 5px; left:5px; right:5px; position:absolute;">
    <div id="innerdiv" style="top: 5px; bottom: 5px; left:5px; right:5px; 
         border: 1px solid red; position:absolute;">
</div>

    See http://jsfiddle.net/gCqqn/

    • 0