如何在< div>上使用max-height元素? [英] How do I use max-height on <div> element?
本文介绍了如何在< div>上使用max-height元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个设置为包含表格元素的元素.
I have a element that is set to contain a table element.
表格元素的行数从0到350以上.
The table element will have anywhere from 0 to upwards of 350 rows.
我认为确定DIV元素大小的最简单方法是应用max-height属性，以便DIV元素会随着添加内容的增长而增长，并在内容超过max-height属性时添加滚动条.
I thought the easiest way to size this DIV element was to apply the max-height property so the DIV element would grow as content was added and add a scroll bar once the content exceeds the max-height property.
代码:
<div style="max-height:209px;overflow:auto;">
<table>
<tr><td>CONTENT</td></tr>
</table>
</div>
相反，我得到的是，当内容达到最大高度限制时，div元素将继续增长，而不是应用overflow属性.
What I get instead is that when the content reaches the max-height limit, instead of applying the overflow property, the div element just keeps growing.
当然，这仅在IE7中发生. Firefox和Safari按设计工作.
Of course this is only happening in IE7. Firefox and Safari work as designed.
好的，这是整个HTML页面， ctrl + f 距离"是我遇到问题的区域.
edit: okay, here's the entire HTML page, ctrl+f "distances" for the area that I'm having problems with.
<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:
<span class="highlight"> DEV </span>
SQL SERVER:
<span class="highlight"> DEV </span>
</div>
<span class="logo"><img src="/vp/_assets/img/header/logo.gif" /></span>
<span class="randomPics"><img src="/vp/_assets/img/header/header4.gif" /></span>
</div>
<div class="clear"></div>
<div id="menu">
<span class="nav">
<a href="/vp/index.asp">Main Menu</a> >
<a href="/vp/tools.asp">Tools</a> >
Discharge Ports
</span>
<span class="icons"><a href="/vp/tools/dischargeports.asp" class="tooltip" title="Add discharge port"><img src="/vp/_assets/img/icons/new.gif" alt="New" /></a><span class="spacer"></span><a href="/vp/scripts/logoff.asp" class="tooltip" 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 class="form fourcolumn">
<tr>
<th><span class="tooltip long" title="To edit an existing discharge port, select one from the drop down list">Discharge ports</span></th>
<td>
<select name="dpid" class="large" 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] MEXICO - VITRO</option>
<option value="59" >MX [MX] 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] 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] 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] CAI LAN</option>
<option value="34" >VN [HO] 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 class="break" 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 class="break" colspan="4"><hr /></td></tr>
<tr>
<th>Name<span class="required">*</span></th>
<td><input type="text" class="large" name="name" value="ALGERIA" maxlength="30" /></td>
<td colspan="2"></td>
</tr>
<tr><td class="break" colspan="4"><hr /></td></tr>
<tr>
<th>Surveyor</th>
<td><input type="text" class="large" name="surveyor" value="SGS" maxlength="30" /></td>
<td colspan="2"></td>
</tr>
<tr>
<th>Ship agent</th>
<td><input type="text" class="large" name="shipagent" value="EUROMAR" maxlength="30" /></td>
<td colspan="2"></td>
</tr>
<tr>
<th>Transit time</th>
<td><input type="text" class="small" name="transittime" value="0" maxlength="3" /></td>
<td colspan="2"></td>
</tr>
<tr><td class="break" colspan="4"><hr /></td></tr>
<tr>
<th>Port costs</th>
<td><input type="text" class="small" name="port_costs" id="port_costs" value="0" maxlength="10" /> <strong>($)</strong></td>
<td colspan="2"></td>
</tr>
</table>
<br />
<table><caption class="subcaption">Distance to load ports</caption></table>
<br />
<table class="form fourcolumn">
<tr>
<th>Load ports</th>
<td>
<select name="add_loadport" class="large">
<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 style="float:left;"><input type="text" class="small" name="add_loadport_nauticalmiles" id="add_loadport_nauticalmiles" value="0" maxlength="10" /></div><div style="float:right;"><img src="/vp/_assets/img/buttons/add.gif" name="add_loadport_btn" id="add_loadport_btn" alt="" /></div></td>
</tr>
</table>
<br />
<div style="max-height:197px;overflow:auto;">
<table class="distances">
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
</table>
</div>
<br />
<table><caption class="subcaption">Distance to discharge ports</caption></table>
<br />
<table class="form fourcolumn">
<tr>
<th>Discharge ports</th>
<td>
<select name="add_dischargeport" class="large">
<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>
推荐答案
表示max-height不适用于表格.尝试删除div内的表.
says that max-height doesn't work with tables. try removing the table that is inside your div.
这篇关于如何在< div>上使用max-height元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
