Home >Web Front-end >HTML Tutorial >The upper and lower parts of my page have different heights in machines with different resolutions_html/css_WEB-ITnose
The upper and lower parts of my page have different heights in machines with different resolutions_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:23:49922browse
The upper and lower parts of my page have different heights on machines with different resolutions. How can I set the proportion so that the table above can be fully displayed at any time?
Now row 4 cannot be displayed on some machines because the height of the table is reduced in machines with small resolutions.
Also, after changing the resolution, the text in the table is also uneven. Some labels are above the text box and some are on the left. How can I adjust it?
The html code is as follows:
<!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> Reply to the discussion (solution)
Just use js to specify the height of the two divs
<!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> What a kind person upstairs!
However, the positions of each label and the text box in this table are not aligned yet. Some labels are above the text box, and some are on the left
You can adjust the search width to a smaller value, and then Change the cell width.
<!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 and b
relationship a above b upper and lower relationship
requirement a show all
then I can understand a what Don’t do either. b Just place it according to the natural position
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：I just learned css and I have a question_html/css_WEB-ITnoseNext article：I just learned css and I have a question_html/css_WEB-ITnose