用table来布局_是页面高度自适应

最新推荐文章于 2022-09-08 10:42:13 发布

包达叔

最新推荐文章于 2022-09-08 10:42:13 发布

阅读量359

点赞数

文章标签： Java

本文链接：https://blog.csdn.net/zheyiw/article/details/83777211

版权


用表格做整个页面的布局，将需要自动适应的地方放在高度100%的td中
 <tr height="100%">
	<td height="100%">

例如：


<table style="width: 100%;height:100%;border:0px solid #006699;overflow:hidden;">
<tr>
	<td>

		<table width="100%" cellPadding="1" class="fb_result" style="" border="0" cellSpacing="1" onkeydown="javascript:if (window.event.keyCode==13) queryInfo();">
		<tr class="fb_result_content_">
	    <td class="fb_result_content_" style="width:25%;text-align:right;">
	        系统名称：
	    </td>
	    <td class="fb_result_content" style="">
	        <input type="text" name="SYSTEMNAME" id="SYSTEMNAME" value="" focus/>
	        <input type="submit" value="查 询" class="button" onclick="" />
	    </td>
		</tr>
		</table> 

	</td>
</tr>

 <tr height="100%">
	<td height="100%">

		<iframe id="QueryResult" name="QueryResult" src="http://www.baidu.com" height="100%" width="100%" style="border:1px solid #006699;" marginWidth="0" marginheight="0" frameborder="0" scrolling="auto" class="fb_result">
		</iframe>

	</td>
</tr>

<tr>
	<td>

		<table id="sortTable" width="100%" cellPadding="1" class="fb_result" style="" border="0" cellSpacing="1">
		<tr>
		<td class="fb_result_content_" width="15%">权限起始时间:</td>
		<td class="fb_result_content" width="35%">
			<input  eos_displayname="要求完成时间" type="text" 	id = "STARTTIME"  name=""	value="" onChange="timeAdd()"/> 
		</td>
		<td class="fb_result_content_" width="15%">权限起始时间:</td>
		<td class="fb_result_content" width="35%">
			<input  eos_displayname="要求完成时间" type="text" 	id = "endtime"  name=""	value="" onChange="timeAdd()"/> 
		</td>
		</tr>
		<tr>
		<td colspan=10 style="text-align:center">
			<input type="button" value="确定" class="button" onclick="add()" /> 
			<input type="button" value="取消" class="button" onclick="javascript:window.close();" />
		</td>
		</tr>
		</table>

	</td>
</tr>
</table>