CODEWITHSUNDEEP
cssinternet-explorer-7internet-explorer-6
artwl
artwl

Reputation: 3582

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!

Upvotes: 4

Views: 3667

Answers (4)

keaukraine
keaukraine

Reputation: 5364

In my case I wasn't able to set height:100% for textarea within absolutely positioned div (cols and rows were set).

Thus, for IE7 I've stretched textarea with position:absolute (this way won't work in any normal browser, so I've used IE7 CSS * hack):

CSS:

.textarea-wrapper {
    height: auto;
    position: absolute;
    top: 0;
    bottom: 67px;
    left: 0;
    right: 0;
}

textarea {
    width: 100%;
    height: 100%;
    padding: 5px;
    margin: 0;
    border: 1px solid #CCC;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;

    *width: 99%;
    *position: absolute;
    *top: 0;
    *bottom: 0;
    *left: 0;
    *right: 0;
    *height: auto;
}

HTML:

<div class="textarea-wrapper">
    <textarea id="new-comment" rows="2" cols="2"></textarea>
</div>

Upvotes: 0

artwl
artwl

Reputation: 3582

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>

Upvotes: 1

Davidsun
Davidsun

Reputation: 721

This is a solution works in IE7/8, but not IE6 (I just put CSS here).

Actually, for IE6, the you cannot use "height:100%". The bug can be found here: Textarea 100% height in IE

    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;
        position:relative;
    }
    fieldset,textarea{
        border: 0 none;
    }
    #LeftPanel
    {
        width: 48%;
        float: left;
        height:100%;
        position:relative;
    }
    .window {
        position:relative;
        border: 1px solid #ADADAD;
        width: 100%;
        float: left;
    }
    .top {
        height: 25%;
    }
    .bottom {
        height: 75%;
    }
    .code{
        width:100%; 
        height: 100%;
    }

Upvotes: 0

Bryan Naegele
Bryan Naegele

Reputation: 660

Set the containing element's height to 100%. IE6/7 sets the height based on the parent's height.

Upvotes: 0

Related Questions