我的页面上下2部分在不同分辨率的机器里高度不同_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 12:23:49916검색
我的页面上下2部分在不同分辨率的机器里高度不同，怎么设置比例让上面的表格能任何时候都全部显示？
现在在有的机器里第4行显示不出来，因为表格的高度在小分辨率的机器里就缩小了。
还有分辨率改了后，表格里的文字也不齐了，有的标签在文本框上面，有的在左边，请问怎么调整？
html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>aaa</title></head><body class="bodyWithBorder"> <form name="templateAdd"> <div class="topToolBar"> <div class="toolGroup" style="float: left;"><table width="100%" border="1"> <tr> <td><label for="security_organization_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px;">流水号</label> <input name="text" type="text" class="table_top_text" id="BOSS_ID" value=""/></td> <td><label for="Problem" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text10" type="text" class="table_top_text" id="input_Problem" value=""/></td> <td><label for="Brand" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水</label> <input name="text5" type="text" class="table_top_text" id="input_brand" value=""/></td> <td><label for="capesname" style="padding-right: 3px; margin-left: 10px; font-size: 12px;"">流水号流水</label> <input name="text8" type="text" class="table_top_text" id="input_ReCount" value=""/></td> <td><label for="accept_start" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text152" type="text" class="table_top_text" id="input_AcceptStart" value=""/></td> <td rowspan="4"><input name="button" type="button" class="button_middle2" id="searchButton" style="margin-left: 20px;" onclick="checkParam()" onmouseover="this.className='button_middle_hover'" onmouseout="this.className='button_middle2'" value="搜索" /> <input name="button" type="button" class="button_middle2" id="resetButton" style="margin-left: 20px;" onclick="clearForm('templateAdd')" onmouseover="this.className='button_middle_hover'" onmouseout="this.className='button_middle2'" value="重置" /></td> </tr> <tr> <td><label for="bomc_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水</label> <input name="text2" type="text" class="table_top_text" id="input_BOMC" value=""/></td> <td><label for="deal_type" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label> <input name="text11" type="text" class="table_top_text" id="input_deal" value=""/></td> <td><label for="Product" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水</label> <input name="text6" type="text" class="table_top_text" id="input_Product" value=""/></td> <td><label for="service_type" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text12" type="text" class="table_top_text" id="input_Service" value=""/></td> <td><label for="accept_end" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text153" type="text" class="table_top_text" id="input_AcceptEnd" value=""/></td> </tr> <tr> <td><label for="Accept_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text3" type="text" class="table_top_text" id="input_Accept" value=""/></td> <td><label for="Overtime" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label> <input name="text9" type="text" class="table_top_text" id="input_Overtime" value=""/></td> <td><label for="log" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label> <input name="text13" type="text" class="table_top_text" id="input_log" value=""/></td> <td><label for="WorkGroup" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text15" type="text" class="table_top_text" id="input_workgroup" value=""/></td> <td><label for="deal_start" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text154" type="text" class="table_top_text" id="input_DealStart" value=""/></td> </tr> <tr> <td><label for="User_Name" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text4" type="text" class="table_top_text" id="input_Username" value=""/></td> <td><label for="resperson_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text7" type="text" class="table_top_text" id="input_Status" value=""/></td> <td><label for="Person" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text16" type="text" class="table_top_text" id="input_person" value=""/> </td> <td><label for="Solution" style="padding-right: 3px; margin-left: 10px; font-size: 12px;"">流水号流水号</label> <input name="text14" type="text" class="table_top_text" id="input_Solution" value=""/> </td> <td><label for="deal_end" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号:</label> <input name="text155" type="text" class="table_top_text" id="input_DealEnd" value=""/></td> </tr></table> </div> <div style="margin-top: 0px;"> <center> <Iframe name="tt" src="http://www.baidu.com" width="100%" height="350px" marginwidth="1" marginheight="1" scrolling="yes" frameborder="0"></iframe> </center> </div> </form> </body></html> 回复讨论(解决方案)
用 js指定两个div的高度即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>aaa</title><style type="text/css">body {overflow:hidden;margin:0;padding:0;width:100%;height:100%;}.topToolBar {position:absolute;left:0;top:0;right:0;width:100%;height:204px;}.bottom {position:absolute;left:0;top:204px;right:0;width:100%;bottom:0;border:1px solid red;}.bottom iframe {position:absolute;bottom:0px;left:0px;top:0px;right:0px;}</style></head><body class="bodyWithBorder" scroll=no> <form name="templateAdd"> <div class="topToolBar"><table width="100%" border="1"> <tr> <td><label for="security_organization_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px;">流水号</label> <input name="text" type="text" class="table_top_text" id="BOSS_ID" value=""/></td> <td><label for="Problem" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text10" type="text" class="table_top_text" id="input_Problem" value=""/></td> <td><label for="Brand" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水</label> <input name="text5" type="text" class="table_top_text" id="input_brand" value=""/></td> <td><label for="capesname" style="padding-right: 3px; margin-left: 10px; font-size: 12px;"">流水号流水</label> <input name="text8" type="text" class="table_top_text" id="input_ReCount" value=""/></td> <td><label for="accept_start" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text152" type="text" class="table_top_text" id="input_AcceptStart" value=""/></td> <td rowspan="4"><input name="button" type="button" class="button_middle2" id="searchButton" style="margin-left: 20px;" onclick="checkParam()" onmouseover="this.className='button_middle_hover'" onmouseout="this.className='button_middle2'" value="搜索" /> <input name="button" type="button" class="button_middle2" id="resetButton" style="margin-left: 20px;" onclick="clearForm('templateAdd')" onmouseover="this.className='button_middle_hover'" onmouseout="this.className='button_middle2'" value="重置" /></td> </tr> <tr> <td><label for="bomc_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水</label> <input name="text2" type="text" class="table_top_text" id="input_BOMC" value=""/></td> <td><label for="deal_type" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label> <input name="text11" type="text" class="table_top_text" id="input_deal" value=""/></td> <td><label for="Product" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水</label> <input name="text6" type="text" class="table_top_text" id="input_Product" value=""/></td> <td><label for="service_type" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text12" type="text" class="table_top_text" id="input_Service" value=""/></td> <td><label for="accept_end" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text153" type="text" class="table_top_text" id="input_AcceptEnd" value=""/></td> </tr> <tr> <td><label for="Accept_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text3" type="text" class="table_top_text" id="input_Accept" value=""/></td> <td><label for="Overtime" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label> <input name="text9" type="text" class="table_top_text" id="input_Overtime" value=""/></td> <td><label for="log" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label> <input name="text13" type="text" class="table_top_text" id="input_log" value=""/></td> <td><label for="WorkGroup" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label> <input name="text15" type="text" class="table_top_text" id="input_workgroup" value=""/></td> <td><label for="deal_start" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text154" type="text" class="table_top_text" id="input_DealStart" value=""/></td> </tr> <tr> <td><label for="User_Name" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text4" type="text" class="table_top_text" id="input_Username" value=""/></td> <td><label for="resperson_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text7" type="text" class="table_top_text" id="input_Status" value=""/></td> <td><label for="Person" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label> <input name="text16" type="text" class="table_top_text" id="input_person" value=""/> </td> <td><label for="Solution" style="padding-right: 3px; margin-left: 10px; font-size: 12px;"">流水号流水号</label> <input name="text14" type="text" class="table_top_text" id="input_Solution" value=""/> </td> <td><label for="deal_end" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号:</label> <input name="text155" type="text" class="table_top_text" id="input_DealEnd" value=""/></td> </tr></table> </div><div class='bottom'> <Iframe name="tt" src="http://www.baidu.com" width="100%" height="100%" marginwidth="1" marginheight="1" scrolling="yes" frameborder="0"></iframe></div> </form> </body></html> 楼上真是好心人啊！
不过这个表格里每个标签和文本框的位置还没对齐，有的标签在文本框上面，有的在左边
你把搜索重宽带调小点，然后单元格宽度改下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>aaa</title><style type="text/css">body {overflow:hidden;margin:0;padding:0;width:100%;height:100%;}.topToolBar {position:absolute;left:0;top:0;right:0;width:100%;height:204px;}.bottom {position:absolute;left:0;top:204px;right:0;width:100%;bottom:0;border-top:1px solid red;}.bottom iframe {position:absolute;bottom:0px;left:0px;top:0px;right:0px;}.table_top_text {width:100%;}</style> </head> <body class="bodyWithBorder" scroll=no> <form name="templateAdd"> <div class="topToolBar"><table width="100%" border="0"> <tr> <td nowrap align=right><label for="security_organization_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px;">流水号</label></td><td width="10%"> <input name="text" type="text" class="table_top_text" id="BOSS_ID" value=""/></td> <td nowrap align=right><label for="Problem" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label></td><td width="10%"> <input name="text10" type="text" class="table_top_text" id="input_Problem" value=""/></td> <td nowrap align=right><label for="Brand" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水</label></td><td width="10%"> <input name="text5" type="text" class="table_top_text" id="input_brand" value=""/></td> <td nowrap align=right><label for="capesname" style="padding-right: 3px; margin-left: 10px; font-size: 12px;">流水号流水</label></td><td width="10%"> <input name="text8" type="text" class="table_top_text" id="input_ReCount" value=""/></td> <td nowrap align=right><label for="accept_start" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label></td><td width="10%"> <input name="text152" type="text" class="table_top_text" id="input_AcceptStart" value=""/></td> <td rowspan="4"><input name="button" type="button" class="button_middle2" id="searchButton" style="margin-left: 20px;" onclick="checkParam()" onmouseover="this.className='button_middle_hover'" onmouseout="this.className='button_middle2'" value="搜索" /> <input name="button" type="button" class="button_middle2" id="resetButton" style="margin-left: 20px;" onclick="clearForm('templateAdd')" onmouseover="this.className='button_middle_hover'" onmouseout="this.className='button_middle2'" value="重置" /></td> </tr> <tr> <td nowrap align=right><label for="bomc_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水</label></td><td width="10%"> <input name="text2" type="text" class="table_top_text" id="input_BOMC" value=""/></td> <td nowrap align=right><label for="deal_type" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label></td><td width="10%"> <input name="text11" type="text" class="table_top_text" id="input_deal" value=""/></td> <td nowrap align=right><label for="Product" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水</label></td><td width="10%"> <input name="text6" type="text" class="table_top_text" id="input_Product" value=""/></td> <td nowrap align=right><label for="service_type" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label></td><td width="10%"> <input name="text12" type="text" class="table_top_text" id="input_Service" value=""/></td> <td nowrap align=right><label for="accept_end" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label></td><td width="10%"> <input name="text153" type="text" class="table_top_text" id="input_AcceptEnd" value=""/></td> </tr> <tr> <td nowrap align=right><label for="Accept_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label></td><td width="10%"> <input name="text3" type="text" class="table_top_text" id="input_Accept" value=""/></td> <td nowrap align=right><label for="Overtime" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label></td><td width="10%"> <input name="text9" type="text" class="table_top_text" id="input_Overtime" value=""/></td> <td nowrap align=right><label for="log" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流</label></td><td width="10%"> <input name="text13" type="text" class="table_top_text" id="input_log" value=""/></td> <td nowrap align=right><label for="WorkGroup" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号流水号</label></td><td width="10%"> <input name="text15" type="text" class="table_top_text" id="input_workgroup" value=""/></td> <td nowrap align=right><label for="deal_start" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label></td><td width="10%"> <input name="text154" type="text" class="table_top_text" id="input_DealStart" value=""/></td> </tr> <tr> <td nowrap align=right><label for="User_Name" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label></td><td width="10%"> <input name="text4" type="text" class="table_top_text" id="input_Username" value=""/></td> <td nowrap align=right><label for="resperson_id" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label></td><td width="10%"> <input name="text7" type="text" class="table_top_text" id="input_Status" value=""/></td> <td nowrap align=right><label for="Person" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号</label></td><td width="10%"> <input name="text16" type="text" class="table_top_text" id="input_person" value=""/> </td> <td nowrap align=right><label for="Solution" style="padding-right: 3px; margin-left: 10px; font-size: 12px;">流水号流水号</label></td><td width="10%"> <input name="text14" type="text" class="table_top_text" id="input_Solution" value=""/> </td> <td nowrap align=right><label for="deal_end" style="padding-right: 3px; margin-left: 10px; font-size: 12px">流水号:</label></td><td width="10%"> <input name="text155" type="text" class="table_top_text" id="input_DealEnd" value=""/></td> </tr></table> </div><div class='bottom'> <Iframe name="tt" src="http://www.baidu.com" width="100%" height="100%" marginwidth="1" marginheight="1" scrolling="yes" frameborder="0"></iframe></div> </form> </body></html> a 和 b
关系 a在b上面 上下关系
要求 a全部显示
那么 我可以理解 a什么都不做 b根据自然位置放置就可以了
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.