我的页面上下2部分在不同分辨率的机器里高度不同_html/css

首页

web前端

html教程

我的页面上下2部分在不同分辨率的机器里高度不同_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:23 PM

我的页面上下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

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser