html – 在DIV元素上使用max-height

html – 在DIV元素上使用max-height,第1张

概述我有一个DIV元素设置为包含一个表元素. 表元素将具有从0到350行的任何位置. 我认为调整此DIV元素大小的最简单方法是应用max-height属性,以便DIV元素在添加内容时增长,并在内容超出max-height属性时添加滚动条. 码: <div style="max-height:209px;overflow:auto;"> <table> <tr><td>CON 我有一个div元素设置为包含一个表元素.

表元素将具有从0到350行的任何位置.

我认为调整此div元素大小的最简单方法是应用max-height属性,以便div元素在添加内容时增长,并在内容超出max-height属性时添加滚动条.

码:

<div >     <table>         <tr><td>CONTENT</td></tr>     </table></div>

我得到的是当内容达到最大高度限制时,而不是应用overflow属性,div元素只是不断增长.

当然这只发生在ie7中. firefox和Safari按设计工作.

编辑:好的,这是整个HTML页面,ctrl f“距离”我遇到问题的区域.

<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />    <Meta http-equiv="X-UA-Compatible" content="IE=Emulateie7" /> <Title>Voyage Planning | Tools | discharge Ports</Title>    <link rel="shortcut icon" type="image/x-icon" href="/vp/favicon.ico" /> <!--[if gte IE 6]><!-->  <link rel="stylesheet" type="text/CSS" href="/vp/_assets/CSS/screen.CSS" media="screen,projection,print" />  <script type="text/JavaScript" src="/vp/_assets/Js/jquery-1.2.3.min.Js"></script>     <script type="text/JavaScript" src="/vp/_assets/Js/main.Js"></script>    <!--<![endif]--></head><body><script language="JavaScript" type="text/JavaScript"><!--  function dischargeport_selected() {  if (document.postform.dpID.value == "")   { window.location.href = "/vp/tools/dischargeports.asp"; }  else   { window.location.href = "/vp/tools/dischargeports.asp?dpID=" + document.postform.dpID.value; } } function submitform() {  if (valIDateform() && confirm("Are you sure you want to update this discharge port?"))  {   document.getElementByID("spinner").style.display = "block";   document.getElementByID("update").style.display = "none";   document.getElementByID("spinner").INNERHTML = "<img src='/vp/_assets/img/spinner.gif' alt='' />";   }  else   { return false; } } function valIDateform() {  var isformcomplete = true;  message = "The following tasks need to be completed     \nbefore continuing:\n\n";  if (document.postform.name.value == "")  {   message += "* Enter the discharge port's name\n";   isformcomplete = false;  }  if (!is_numeric(document.postform.transittime.value))  {   message += "* Transit times must be numeric\n";   isformcomplete = false;  }    if ( !is_numeric($("#port_costs").val()) )  {   message += "* Port costs must be numeric\n";   isformcomplete = false;  }     if (isformcomplete == false)  {   alert(message);  }  return isformcomplete; }//--></script><div ID="container"> <div ID="content">     <div ID="header">  <div ID="development">   WEB SERVER:&nbsp;   <span >&nbsp;DEV&nbsp;</span>    &nbsp;sql SERVER:&nbsp;   <span >&nbsp;DEV&nbsp;</span>  </div> <span ><img src="/vp/_assets/img/header/logo.gif" /></span>    <span ><img src="/vp/_assets/img/header/header4.gif" /></span></div><div ></div>        <div ID="menu">         <span >             <a href="/vp/index.asp">Main Menu</a>&nbsp;&gt;                <a href="/vp/tools.asp">Tools</a>&nbsp;&gt;                discharge Ports            </span>            <span ><a href="/vp/tools/dischargeports.asp"  title="Add discharge port"><img src="/vp/_assets/img/icons/new.gif" alt="New" /></a><span ></span><a href="/vp/scripts/logoff.asp"  title="logoff"><img src="/vp/_assets/img/icons/logoff.gif" alt="logoff" /></a></span>        </div>        <table>         <caption>Edit discharge port</caption>        </table>        <br />        <form method="post" action="/vp/tools/scripts/updatedischargeport.asp" name="postform" onsubmit="return submitform();">        <input type="hIDden" name="fromsubmit" value="true" />        <input type="hIDden" name="edit" value="true" />        <table >            <tr>                <th><span  title="To edit an existing discharge port,select one from the drop down List">discharge ports</span></th>                <td>                 <select name="dpID"  onChange="dischargeport_selected();">                    <option value="" ></option>                  <option value="14" >AG [BUE] BUENOS AIRES</option>                  <option value="126" >AG [ZZZ] Test</option>                  <option value="107" >AG [ZAR] ZaraTE</option>                  <option value="4" selected="selected">AL [ALG] ALGERIA</option>                  <option value="15" >AR [BUE] BUENOS AIRES</option>                  <option value="109" >AR [CAM] CAMPANA</option>                  <option value="27" >AR [DEL] DETLA DOCK</option>                  <option value="55" >AR [MON] MONTEVIDEO</option>                  <option value="108" >AR [ZAR] ZaraTE</option>                  <option value="3" >AU [ADE] ADELAIDE</option>                  <option value="13" >AU [BRI] BRISBANE</option>                  <option value="53" >AU [MEL] MELBOURNE</option>                  <option value="116" >AU [NWC] NEW CASTLE</option>                  <option value="65" >AU [PTK] PORT KEMBLA</option>                  <option value="95" >AU [SYD] SYDNEY</option>                  <option value="102" >AU [WEL] WELliNGTON</option>                  <option value="5" >BL [ANT] ANTOFAGASTA</option>                  <option value="8" >BL [ARI] ARICA</option>                  <option value="110" >BR [ANG] angrA DOS REIS</option>                  <option value="7" >BR [ara] araTU</option>                  <option value="86" >BR [SEP] ITAGUAI</option>                  <option value="63" >BR [PAR] ParaNAGUA</option>                  <option value="76" >BR [REC] RECIFE</option>                  <option value="77" >BR [RGR] RIO GRANDE</option>                  <option value="114" >BR [SAL] SALVADOR</option>                  <option value="81" >BR [SAN] SANTOS</option>                  <option value="113" >BR [FRA] SAO FRANCISCO DO Sul</option>                  <option value="83" >BR [SAO] SAO SEBASTIAO</option>                  <option value="78" >CA [RIJ] RIJEKA</option>                  <option value="6" >CH [ANT] ANTOFAGASTA</option>                  <option value="9" >CH [ARI] ARICA</option>                  <option value="48" >CH [liR] liRQUEN</option>                  <option value="82" >CH [SAN] SAN ANTONIO</option>                  <option value="11" >CL [bar] barRANquilLA</option>                  <option value="16" >CL [BUE] BUENAVENTURA</option>                  <option value="121" >CL [CAR] CARTAGENA</option>                  <option value="25" >CN [DAL] daliEN</option>                  <option value="29" >CN [FNC] FANGCHENG</option>                  <option value="120" >CN [liA] liANYUNGANG</option>                  <option value="60" >CN [NAN] NANJING</option>                  <option value="111" >CN [NTG] NANTONG</option>                  <option value="73" >CN [QIN] QINHUANGDAO</option>                  <option value="87" >CN [SHA] SHANGHAI</option>                  <option value="88" >CN [SHE] SHEKOU</option>                  <option value="18" >CR [CAL] CALDERA</option>                  <option value="80" >DR [RIO] RIO HAINA</option>                  <option value="32" >EC [GUA] GUAYAquil</option>                  <option value="125" >EG [ALX] ALEXANDRIA</option>                  <option value="17" >EG [CAI] CAIRO</option>                  <option value="2" >ES [ACA] ACAJUTLA</option>                  <option value="68" >GU [PTQ] PUERTO QUETAZAL</option>                  <option value="69" >HN [PTQ] PUERTO QUETZAL</option>                  <option value="36" >ID [JAK] JAKARTA</option>                  <option value="40" >ID [KAU] KUatan</option>                  <option value="52" >ID [MED] MEDAN</option>                  <option value="85" >ID [SEM] SEMaraNG</option>                  <option value="94" >ID [SUR] SURABAYA</option>                  <option value="19" >IN [CAL] CALCUTTA</option>                  <option value="38" >IN [KAN] KANDLA</option>                  <option value="33" >IS [HAI] HaifA</option>                  <option value="42" >JM [KIN] KINGSTON</option>                  <option value="21" >JP [CHI] CHIBA</option>                  <option value="122" >JP [HAK] HAKATA</option>                  <option value="41" >JP [KAW] KAWASAKI</option>                  <option value="43" >JP [KOK] KOkura</option>                  <option value="49" >JP [MAI] MAIZURU</option>                  <option value="54" >JP [MIZ] MIZUSHIMA</option>                  <option value="61" >JP [NAN] NAN-YO  TOSOH</option>                  <option value="119" >JP [NII] NIIHAMA</option>                  <option value="123" >JP [ONA] ONAHAMA</option>                  <option value="62" >JP [OSA] OSAKA</option>                  <option value="89" >JP [SHI] SHIKIMA</option>                  <option value="96" >JP [TAC] TACHIBANA</option>                  <option value="104" >JP [YOK] YOKKAICHI</option>                  <option value="35" >KR [INC] INCHEON</option>                  <option value="46" >KR [KUN] KUNSAN</option>                  <option value="71" >KR [PUS] PUSAN</option>                  <option value="50" >KR [MAI] TRANSHIP TO MAIZURU</option>                  <option value="101" >KR [ulS] ulSAN</option>                  <option value="12" >ML [BIN] BINTulU</option>                  <option value="45" >ML [KUA] KUANTAN</option>                  <option value="64" >ML [PAS] PASIR GUDANG</option>                  <option value="66" >ML [PTK] PORT KLANG</option>                  <option value="58" >MV [MV] &nbsp;MEXICO - VITRO</option>                  <option value="59" >MX [MX] &nbsp;MEXICO - NON-VITRO</option>                  <option value="47" >NI [LAG] LAGOS</option>                  <option value="57" >NZ [MTM] MT MANGANUE</option>                  <option value="99" >NZ [TAU] TAURANGA</option>                  <option value="103" >NZ [WEL] WELliNGTON</option>                  <option value="10" >PA [BAL] BALBOA</option>                  <option value="20" >PE [CAL] CALLAO</option>                  <option value="72" >PK [QAS] </option>                  <option value="39" >PK [KAR] KaraCHI</option>                  <option value="51" >PL [MAN] MANILA</option>                  <option value="30" >PO [GDA] GDANSK</option>                  <option value="91" >PO [STE] STETTIN</option>                  <option value="84" >PO [SCZ] SZCZECIN</option>                  <option value="117" >RA [KLA] KLAIPEDA</option>                  <option value="115" >RA [SPT] ST. PETERSBURG</option>                  <option value="79" >RJ [RIJ] RIJEKA WAREHOUSE</option>                  <option value="23" >SA [CT] &nbsp;CAPE TOWN</option>                  <option value="28" >SA [DUR] DURBAN</option>                  <option value="90" >SG [SIN] SINGAPORE</option>                  <option value="26" >SI [dam] damMAM</option>                  <option value="37" >SI [JED] JEDDAH</option>                  <option value="74" >SI [RAK] RAK</option>                  <option value="92" >TG [SUA] SUAO</option>                  <option value="97" >TG [TAI] TAICHUNG</option>                  <option value="1" >TH [01] &nbsp;KOS</option>                  <option value="44" >TH [KOS] KOSICHANG</option>                  <option value="31" >TK [GEM] GEMliK</option>                  <option value="100" >TK [TEK] TEKIRDAG</option>                  <option value="70" >TR [PTS] PORT OF SPAIN</option>                  <option value="124" >TW [KEE] KEELUNG</option>                  <option value="93" >TW [SUA] SUAO</option>                  <option value="98" >TW [TAI] TAICHUNG</option>                  <option value="75" >UE [RAK] RAS AL KHaimAH</option>                  <option value="56" >UR [MON] MONTEVIDEO</option>                  <option value="22" >VN [CL] &nbsp;CAI LAN</option>                  <option value="34" >VN [HO] &nbsp;HO CHI MIN</option>                  <option value="24" >VZ [CUM] CUMANA</option>                  <option value="67" >VZ [PTO] PUERTO CABELLO</option>                 </select>                </td>                <td colspan="2"></td>            </tr>            <tr><td  colspan="4"><hr /></td></tr>              <tr>             <th>Country</th>                <td>                      <strong>AL [Algeria]</strong>                </td>                <td colspan="2"></td>           </tr>            <tr>             <th>Code</th>                <td>                      <strong>ALG</strong>               </td>                <td colspan="2"></td>           </tr>            <tr><td  colspan="4"><hr /></td></tr>            <tr>             <th>name<span >*</span></th>                <td><input type="text"  name="name" value="ALGERIA" maxlength="30" /></td>                <td colspan="2"></td>           </tr>            <tr><td  colspan="4"><hr /></td></tr>            <tr>             <th>Surveyor</th>                <td><input type="text"  name="surveyor" value="SGS" maxlength="30" /></td>                <td colspan="2"></td>           </tr>            <tr>             <th>Ship agent</th>                <td><input type="text"  name="shipagent" value="EUROMAR" maxlength="30" /></td>                <td colspan="2"></td>           </tr>               <tr>             <th>Transit time</th>                <td><input type="text"  name="transittime" value="0" maxlength="3" /></td>                <td colspan="2"></td>           </tr>            <tr><td  colspan="4"><hr /></td></tr>            <tr>             <th>Port costs</th>                <td><input type="text"  name="port_costs" ID="port_costs" value="0" maxlength="10" />&nbsp;<strong>($)</strong></td>                <td colspan="2"></td>           </tr>                      </table>          <br />          <table><caption >distance to load ports</caption></table>                <br />                <table >                 <tr>                     <th>Load ports</th>                     <td>                         <select name="add_loadport" >                      <option value="" selected="selected"></option>                              <option value="BEA" >BEA [BEAUMONT]</option>                              <option value="bro" >bro [broWNSVILLE]</option>                              <option value="CAS" >CAS [CASTELLON ESP]</option>                              <option value="LAR" >LAR [LAREDO]</option>                              <option value="LBC" >LBC [LONG BEACH CA.]</option>                              <option value="LON" >LON [LONGVIEW WA]</option>                              <option value="LOS" >LOS [LOS ANGELES]</option>                              <option value="OTH" >OTH [OTHER]</option>                              <option value="POR" >POR [PORT ARTHUR TX]</option>                              <option value="PTL" >PTL [PORTLAND OR.]</option>                              <option value="RAK" >RAK [RAS AL KaimAH]</option>                              <option value="RIJ" >RIJ [RIJEKA]</option>                              <option value="SAN" >SAN [SAN DIEGO CA]</option>                              <option value="TRO" >TRO [TRONA]</option>                              <option value="ZZZ" >ZZZ [Test]</option>                      </select>                        </td>                        <th>Nautical miles</th>                        <td><div ><input type="text"  name="add_loadport_nauticalmiles" ID="add_loadport_nauticalmiles" value="0" maxlength="10" /></div><div ><img src="/vp/_assets/img/buttons/add.gif" name="add_loadport_btn" ID="add_loadport_btn" alt="" /></div></td>                    </tr>    </table>                          <br />                <div >                 <table >                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                     <tr>                         <th>To</th>                         <td>[bro] broWNSVILLE</td>                            <th>Nautical miles</th>                            <td><input type="text"  name="" ID="" value="0" maxlength="10" /></td>                        </tr>                    </table>                </div>                              <br />                <table><caption >distance to discharge ports</caption></table>                <br />                <table >                 <tr>                     <th>discharge ports</th>                     <td>                         <select name="add_dischargeport" >                      <option value="" selected="selected"></option>                              <option value="14" >AG [BUE] BUENOS AIRES</option>                              <option value="126" >AG [ZZZ] Test</option>                              <option value="107" >AG [ZAR] ZaraTE</option>                              <option value="4" >AL [ALG] ALGERIA</option>                              <option value="15" >AR [BUE] BUENOS AIRES</option>                              <option value="109" >AR [CAM] CAMPANA</option>                              <option value="27" >AR [DEL] DETLA DOCK</option>                              <option value="55" >AR [MON] MONTEVIDEO</option>                              <option value="108" >AR [ZAR] ZaraTE</option>                              <option value="3" >AU [ADE] ADELAIDE</option>                              <option value="13" >AU [BRI] BRISBANE</option>                              <option value="53" >AU [MEL] MELBOURNE</option>                              <option value="116" >AU [NWC] NEW CASTLE</option>                              <option value="65" >AU [PTK] PORT KEMBLA</option>                              <option value="95" >AU [SYD] SYDNEY</option>                              <option value="102" >AU [WEL] WELliNGTON</option>                              <option value="5" >BL [ANT] ANTOFAGASTA</option>                              <option value="8" >BL [ARI] ARICA</option>                              <option value="110" >BR [ANG] angrA DOS REIS</option>                              <option value="7" >BR [ara] araTU</option>                              <option value="86" >BR [SEP] ITAGUAI</option>
解决方法 http://msdn.microsoft.com/en-us/library/ms530809(VS.85).aspx

说最大高度不适用于表格.尝试删除div中的表.

总结

以上是内存溢出为你收集整理的html – 在DIV元素上使用max-height全部内容,希望文章能够帮你解决html – 在DIV元素上使用max-height所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1133273.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存