How do I use max-height on <div> element?

People also ask

How do I limit the height of a div?

Using Fixed Value First, we will express the max-height in pixels. In this CSS max-height example, the height of the <div> tag can not exceed 65px. We can also express the max-height as a fixed value in em's. In this max-height example, the height of the <div> tag can not exceed 50em.

How do you use maximum height?

The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height .

How auto adjust height in div?

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.

How do you define maximum height?

The max-height property defines the maximum height of an element. If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property. If the content is smaller than the maximum height, the max-height property has no effect.

I have a element that is set to contain a table element.

The table element will have anywhere from 0 to upwards of 350 rows.

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.

Code:

<div style="max-height:209px;overflow:auto;">
     <table>
         <tr><td>CONTENT</td></tr>
     </table>
</div>

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.

Of course this is only happening in IE7. Firefox and Safari work as designed.

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:&nbsp;
   <span class="highlight">&nbsp;DEV&nbsp;</span> 
   &nbsp;SQL SERVER:&nbsp;
   <span class="highlight">&nbsp;DEV&nbsp;</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>&nbsp;&gt;
                <a href="/vp/tools.asp">Tools</a>&nbsp;&gt;
                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] &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 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" />&nbsp;<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>

Related questions
                            
                                Realtime microphone sound level monitoring
                            
                                How do you escape parentheses in jQuery selector?
                            
                                How can I get Ninject 2 to use parameterless constructor for LINQ to SQL DataContext?
                            
                                QMake 'subdirs' template - executing a target?
                            
                                C# StructLayout.Explicit Question
                            
                                How to convert Microsoft Locale ID (LCID) into language code or Locale object in Java
                            
                                Suitable Design Pattern for a Simple Chat Application
                            
                                Best Practice For Location Of Styles In Silverlight
                            
                                Boost.Intrusive and unordered_map
                            
                                What unit testing options are available for Silverlight?
                            
                                Need content in UIWebView to display quickly
                            
                                Variable functions with namespaces in PHP

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With

How do I use max-height on <div> element?

Tags:

People also ask

Recent Activity

Donate For Us