Rumah >hujung hadapan web >html tutorial >我的页面上下2部分在不同分辨率的机器里高度不同_html/css_WEB-ITnose
我的页面上下2部分在不同分辨率的机器里高度不同_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:23:49916semak imbas
我的页面上下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根据自然位置放置就可以了
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：刚学到css，有个问题想问下_html/css_WEB-ITnoseArtikel seterusnya：IE下的<INPUT TYPE="file" 的accept 是不是无效的啊_html/css_WEB-ITnose