Avatar of KNVB HK
KNVB HK
Flag for Hong Kong asked on

Overcome firefox does not support height=100 % question

When you execute the following code,
It work fine, however, it is because I need to make the layer resizable,
it is impossible for hard code the "height" value.
However,when I change the "height" attribute value to "100%",and click the button several times, the table size will be extend in firefox. In IE it does not extend the table size even I add a lot text in the layer.
Can you any one tell me how to fix the problem?
I am using YUI framework to make it resizable.
I am trying to capture the endresize event, however, there are no sample code, I don't know how to do so.
<html>
<body>
	<input type=button onclick="doIt()" value="add item">
	<div style="height:275">
	<table border=1 style="height:100%">
		<tr height="5%"> 
			<td>
				<select>
					<option>1</option>
					<option>2</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<div id="msg" style="width:100%;height:95;border:1px solid rgb(179, 179, 179);overflow:auto">
					d<br>a<br>t<br>a<br>
					d<br>a<br>t<br>a<br>
				</div>
			</td>
		</tr>
	</table>
	</div>
	<script language=javascript>
		function doIt()
		{
			var msg=document.getElementById("msg");
			msg.innerHTML+="fsdfs<br>";
		}
	</script>
</body>

Open in new window

JavaScriptCSS

Avatar of undefined
Last Comment
KNVB HK

8/22/2022 - Mon
Kin Fat SZE

like this?
<html>
<body>
        <input type=button onclick="doIt()" value="add item">
        <div style="height:275">
        <table border=1 style="height:100%">
                <tr height="5%"> 
                  <td>
                    <select>
                            <option>1</option>
                            <option>2</option>
                    </select>
                  </td>
                </tr>
                <tr>
                    <td>
                      <div id="msg" style="width:100%;height:100%;border:1px solid rgb(179, 179, 179);overflow:visible">
                              d<br>a<br>t<br>a<br>
                              d<br>a<br>t<br>a<br>
                      </div>
                    </td>
                </tr>
        </table>
        </div>
        <script language=javascript>
                function doIt()
                {
                        var msg=document.getElementById("msg");
                        msg.innerHTML+="fsdfs<br>";
                        msg.style.height='100%';
                        
                }
        </script>
</body>

Open in new window

ASKER CERTIFIED SOLUTION
KNVB HK

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck