CSS Height 100% in Ie7

Height:100% in IE7

The issues is the container must have height of 100% for it's child element to assume 100%...

In this case the container is <html> -> <body> so a quick fix would be

html, body {
    margin: 0;
    padding: 0;
}
html, body, #divy {
    width:100%;
    height:100%;
}

CSS height 100% in IE7

You have to explicitly define the height of .wrapper, in that situation. That being said, if your top: and bottom: attributes are going to make the height dynamic, your only solution is resetting the height with JavaScript, binding the height to update on window resize, etc.

CSS height=100% for Textarea isn't working in IE6/IE7?

I found it ,when i add cols and rows property to Textarea,it work fine:

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
         body {
            background: none repeat scroll 0 0 #EFEFEF;
            overflow: hidden;
            position: relative;
            margin: 0px;
            padding: 10px;
        }
        div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }
        #content{
            height:200px;
        }
        fieldset,textarea{
            border: 0 none;
        }
        #LeftPanel
        {
            width: 48%;
            float: left;
            height:100%;
        }
        .window {
            border: 1px solid #ADADAD;
            width: 100%;
            float: left;
        }
        .top {
            height: 25%;
        }
        .bottom {
            height: 75%;
        }
        .code{
            width:100%; 
            height: 100%;
        }
    </style>
</head>
<body>
<div id="content">
    <fieldset id="LeftPanel">
        <div id="div_A" class="window top">
            <textarea rows="20" cols="40" id="code_A" class="code">A</textarea>
        </div>
        <div id="div_B" class="window bottom">
            <textarea rows="20" cols="4" id="code_B" class="code">B</textarea>
        </div>
    </fieldset>
</div>
</body>
</html>

Internet Explorer 7 iframe, make height 100%

Simplest fix:

Use html5 doctype if possible:
Set 100% on all parent containers:
*, html, body {
height: 100%;
width:100%;
margin:0;
padding:0;
}

I try to avoid Javascript fix for this sort of things as they're simply rendering and layout issues.

HTML/CSS - No 100% height on div in IE

Try this:

#content_1{
width:200px;
background-color:black;
height:100%;
position: absolute;
}

IE 7 and below assign a value called "hasLayout" to elements that need positioning. Sometimes to work out little quirks like this you have to force an item to have a layout which in this case means setting its position to absolute.

Internet Explorer height: 100% not producing same result as Chrome

It seems like you are making the images a width of 10px and a height of 10px within your image tags. If you control your html you can remove these and it should work fine. If you only control the css just add width: auto; to the following:

.ubermenu .ubermenu-image:not(.ubermenu-image-lazyload) {
    height: auto;
    width: auto;
}

Textarea 100% height in IE

In order for an element to achieve 100% height in IE6, you will need to specify a fixed height of its parent element. If you want to make the element the full-length of your page, apply height:100%; to both the html and body elements.

/*100% height of the parent element for IE6*/ 
#parent {height:500px;}
#child {height:100%;}

/*100% of the page length for IE6*/ 
html, body {height:100%;}
#fullLength {height:100%;}

Taken from: http://www.virtuosimedia.com/

I'm guessing the same applies for IE7.

Why won't this element set to `height: 100%` work in this example in IE7?

I'm not sure why you would apply your shadows in this manner though. How I usually do it is have a wider container (including the widths of the left/right shadows) aligned center (in this case, it's your #mainContainer div, then set a y-repeating background (that is the shadow - just a couple of pixels high will do). I will then specify another div within this container, smaller width, center aligned, that will contain all the text.

Edit: Just noticed your fiddle. I think it may not work in this case due to css conflicts, possible from the osCommerce stylesheet? I'll try to look deeper..hmm

EDIT2: Okay I've traced it to this particular code in stylesheet.css

#login-link,
#logout-link {
    position: absolute;
    bottom: -20px;
    right: 50px;
    background: #333;
    padding: 5px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 100;
    font-weight: bold;
}

<a href="http://174.121.189.41/~wwwgolf/login.php" id="login-link">Login to GolfBallBusters</a>

It's your absolute positioning of this element that's causing the problem. Removing the styling fixes your shadow problems. :)

EDIT FIX:
This should fix it. Or at least it does on my stripped down version of your site layout.
Change #user and #login-link to the following:

#user {
    float: right;
    color: #f90;
    position: relative; /* addition */
}

#login-link,
#logout-link {
    position: absolute;
    top: 31px; /* addition */
    /*bottom: -20px; REMOVED */
    right: 50px;
    height: 15px; /* addition */
    white-space: nowrap; /* addition */
    background: #333;
    padding: 5px;
    text-decoration: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 100;
    font-weight: bold;
}

FIX2:

Change

#user-options .bottom-shadow {
    display: block;
    width: 100%;
    height: 7px;
    position: absolute;
    bottom: -7px;
    #bottom: -5px;
    left: 0;
    background: url(images/layout/shadow-bottom.png) repeat-x;
    z-index: 50;
}

.bottom-shadow {
    width: 100%;
    height: 7px;
    margin-top: -10px;
    background: url(images/layout/shadow-bottom.png) repeat-x;
}

And your HTML layout should be:

    <div id="user-options">
        <div id="choose-your-country">
            <p>Choose your country > </p>         
        </div>

        <div id="user"></div>

        <div id="current-locale">Golf Ball Busters - AU</div>
        <br class="clear">
    </div>
    <div class="bottom-shadow"></div>

Noticed I change bottom-shadow into a div element and moved it out of <div id="user-options">.