ホームページ >ウェブフロントエンド >htmlチュートリアル >解像度が異なるマシンでは、ページの上部と下部の高さが異なります_html/css_WEB-ITnose
解像度が異なるマシンでは、ページの上部と下部の高さが異なります_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:23:49919ブラウズ
解像度が異なるマシンではページの上部と下部の高さが異なります。上の表がいつでも完全に表示されるように比率を設定するにはどうすればよいですか?
解像度が低いマシンではテーブルの高さが低くなるため、行 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 を使用して 2 つの 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 までご連絡ください。