J'ai un élément qui doit contenir un élément de table.
L'élément de table aura n'importe où de 0 à 350 rangées. P>
J'ai pensé au moyen le plus simple de former cet élément div Était d'appliquer la propriété max-hauteur de sorte que l'élément div se développerait en tant que contenu a été ajouté et ajoutez une barre de défilement une fois que le contenu dépasse la propriété max-hauteur. p>
code: p>
<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>
6 Réponses :
Essayez de définir uniquement la hauteur et le débordement pour «faire défiler». Visuellement, il n'ya peut-être pas de différence entre la touche totale étant pleine hauteur et pas em> étant pleine hauteur. Si tel est le cas, je m'abstiendrais simplement d'utiliser max-hauteur au lieu de la hauteur. P>
Pourriez-vous nous montrer un peu plus de votre code, ou peut-être une démonstration en ligne? Je serais intéressé à voir une partie du CSS et le doctype. P>
Cela fonctionne, mais j'espérais éviter que le conteneur DIV sera de la hauteur de 200px, même s'il n'y a qu'un seul élément contenu dans celui-ci.
Je n'ai pas de doctype déclaré.
Euh-oh. Je ne dirai pas que votre question actuelle est causée par cela, mais vous devriez commencer à sélectionner et à adhérer à un doctype.
Je suggère strict. Vous pouvez en savoir plus sur DOCTYPES à Stackoverflow.com/Questtions/255470/...
Quelle version de IE7 utilisez-vous? Le support max-hauteur n'a pas été ajouté avant la version bêta 2. p>
La barre de défilement apparaît dans la vue de compatibilité (le moteur IE7) dans IE8. P>
Êtes-vous sûr de ne pas utiliser IE6? P>
Ouais, j'utilise la version 7.0.5730.13
IE a soutenu max-hauteur depuis IE7 - mais uniquement dans Standards (AKA strict) Mode < / a>. p>
Assurez-vous de disposer d'un DOCTYPE qui déclenche le mode de normes comme la première chose de votre document. (Le mode Quiks peut bousiller un lot
Bien que je suis tout à fait d'accord avec la déclaration d'utilisation du mode de normes ... Je viens de tester cela dans XHTML strict et HTML 4.01 transitional dans IE7 et cela se comporte correctement dans les deux - son problème est ailleurs.
Max-hauteur fonctionne dans les normes et les modes de quinze normes. Tant que vous déclarez le DOCTYPE avec un identifiant système (la liaison DTD) IE7 rendra la page en mode presque des normes.
Le mode presque des normes est un concept de gecko. C'est-à-dire comporte deux modes. Strict peut être déclenché avec un Doctype de transition HTML 4.01 (vous devez simplement utiliser l'identifiant système ainsi que l'identifiant public). XHTML 1.0 Strict déclenchera le mode de normes avec ou sans identifiant système (mais le doctype donné dans la spécification utilise un pour que vous puissiez aussi).
Je viens de copier et collé votre code, puis tomba dans une boucle PHP pour créer 200 rangées ou juste 2 et il se comporte la même chose dans IE 7, Safari et Firefox. P>
Vous ne déclarez probablement pas de DOCTYPE, qui crée le problème que vous décrivez dans mon test. P>
ou dans votre code strong> réel strong> que vous n'avez pas correctement défini débordement: auto. Votre problème est exactement ce qui se passerait si c'était le cas. p>
C'est défini ici dans la question, mais peut-être pas votre code. P>
Oui, je suis exclu, je ne peux pas le faire travailler dans IE7 pour moi. Je posterai la page entière. Je suis assez désemparé à la déclaration de Doctypes, je ne l'ai jamais utilisée.
http://msdn.microsoft.com/fr -US / Bibliothèque / MS530809 (vs.85) .aspx P>
dit que max-hauteur ne fonctionne pas avec des tables. Essayez de supprimer la table dans votre div. p>
La hauteur maximale est réglée sur la DIV extérieure, pas la table
En plus de Max-Wdith, vous pouvez utiliser l'expression suivante pour vous assurer qu'il est compatible avec le navigateur croisé: référence: http://www.fastechws.com/tricks/web/image-max-width-height.php p> p>
Votre code fonctionne dans IE ... La table augmente normalement avec du contenu, puis lorsqu'il atteint 209px, il commence à déborder. Qu'essayez-vous de faire?
OK, j'ai ajouté le HTML complet de la page que je ne peux pas avoir pour travailler dans IE7.
Oh cher. XHTML écrit par une personne qui ne comprend pas XML (avec un script qui est commenté de sorte qu'il ne fonctionnera pas si le document est traité comme XML).