All geek questions in one place

CSS height = 100% for Textarea not working in IE6 / IE7?

My code is:

<!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 fine 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!

+4
source share
4 answers

I found it when I add the cols and rows property to Textarea, it works 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>
+1
source

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

0
source

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

Actually, for IE6 you cannot use "height: 100%". The error 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%; }
0
source

In my case, I was not able to set height:100% for textarea in absolutely positioned cols ( cols and rows ).

Thus, for IE7, I stretched textarea using position:absolute (this method will not work in any regular browser, so I 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>
0
source

Source: https://habr.com/ru/post/1390579/

More articles:


All Articles