Search code examples
cssinternet-explorer-7internet-explorer-6

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

My code:

<!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 id="code_A" class="code">A</textarea>
        </div>
        <div id="div_B" class="window bottom">
            <textarea id="code_B" class="code">B</textarea>
        </div>
    </fieldset>
</div>
</body>
</html>

It works well in Chrome, Firefox, IE8/IE9, but it doesn't work in IE6/IE7.

In IE6/IE7:

enter image description here

In Firefox:

enter image description here

Who can help me? Thanks!

Solution

  • 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>