Table with 100% height row and Internet Explorer 9_问答_开发者

I have the following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
    <TR>
        <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
    </TR>
    <TR style="height:100%">
        <TD style="height:100%;background-color:yellow">
            <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
        </TD>
    </TR>
</TABLE>
</DIV>
</BODY>
</html>

It works fine using Chrome, Firefox or Internet Explorer in quirks mode but IE9 in standard mode draws a textarea with same height as root 开发者_JAVA技巧div. So is there a way without using JS, to tell browser to draw a textarea using all remaining space? I tried unsuccessfully div with float attributes, div with display table attribute, div with fixed position attribute. Of course, with Javascript or if the first row has a constant known height, there are several working solutions.

Any suggestions?

As far as I know, Internet Explorer looks up to the first parent element that has hasLayout triggered to calculate the 100% height. This is different from most other browsers. Documentation on Internet Explorer's hasLayout property:

To begin with, there are two sets of elements.

Elements that rely on a parent element to size and arrange their contents

Elements that are responsible for sizing and arranging their own contents.

In general, elements in Internet Explorer's Dynamic HTML engine are not responsible for arranging themselves. A div or a p element may have a position within the source-order and flow of the document, but their contents are arranged by their nearest ancestor with a layout (frequently body). These elements rely on the ancestor layout to do all the heavy lifting of determining size and measurement information for them.

Note: The element that is responsible for sizing and positioning an element may be an ancestor, not just the element's immediate parent.) The major benefits of each element not having its own layout are performance and simplicity.

A quick way to solve your problem could be to add a wrapper div element within your td, which mimics the size of the td but because of it's nature triggers hasLayout (not tested, jsFiddle on IE8 Compatibility is broken):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
    <TR>
        <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
    </TR>
    <TR style="height:100%">
        <TD style="height:100%;background-color:yellow">
                <div style="height: 100%; width: 100%; position: relative;">
                    <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
                </div>
        </TD>
    </TR>
</TABLE>
</DIV>
</BODY>
</html>

Do you require the height:150px; property on you DIV, if not move it to the TABLE:

See here for JSFiddle:

<DIV style="background-color:#AAAAFF;overflow:auto">
<TABLE style="height:150px;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
    <TD style="height:100%;background-color:yellow">
        <TEXTAREA style="height: 100%; width: 100%; -moz-box-sizing: border-box; border: 0pt none; padding: 0pt; margin: 0pt;">Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
    <TD style="height:100%;background-color:yellow">
        <TEXTAREA style="height: 100%; width: 100%; -moz-box-sizing: border-box; border: 0pt none; padding: 0pt; margin: 0pt;">Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>
</BODY>
</html>

Maybe this code help you...

I test it at jsfiddle: http://jsfiddle.net/mHTTM/5/

In IE, if you wearing 100 percent in child tag, width/height will be the same as the top parent tag's width/height. Not the parent tag. So you just need to change child tags from percent to pixel.

<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
    <TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="auto">
    <TD style="height:122px;background-color:yellow">
        <TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
    </TD>
</TR>
</TABLE>
</DIV>

I don't think you should be using tables for layout in the first place. Switch over to <div>, <span> and the HTML5 sets of containers.