当我选择放大与页脚相交的其他div时，我认为页脚的div将是动态的 在这里我的所有代码都会在你的导航器上收集它并测试它以显示结果 Dropbox上有：https://www.dropbox.com/s/sxcd6unqilnemme/form.html?dl=0 我希望它位于第二行内容之下，但我似乎无法做到这一点，而当内容较少时仍然位于内容的底部。
HTML：
<body onload="myfun()">
<div id="js-manage-listing-nav" class="manage-listing-nav2">
<div class="nav-sections">
<ul class="list-unstyled row-space-5">
<li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;" id="nav-item1">
<a>
<div class="row nav-item" style="width:222px;">
<div class="col-sm-12 va-container">
<div class="text-wrap va-middle">
<a href="javascript:show('link1')" id="link1" > <span id="titre1" class="nav-item-name" style="margin-left:46px;"> + Informations de base </span></a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;"id="nav-item2">
<div class="row nav-item" style="width:222px;">
<div class="col-sm-12 va-container" style="width:256px">
<div class="text-wrap va-middle">
<a href="javascript:show('link2')" id="link2" ><span id="titre2" class="nav-item-name" style="margin-left:46px;"> + Adresse </span> </a>
</div>
</div>
</div>
</li>
<li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;"id="nav-item3">
<a>
<div class="row nav-item" style="width:222px;">
<div class="col-sm-12 va-container">
<div class="text-wrap va-middle">
<a href="javascript:show('link3')" id="link3" > <span id="titre3" class="nav-item-name" style="margin-left:46px;"> + Contact </span></a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;"id="nav-item4">
<a>
<div class="row nav-item" style="width:222px;">
<div class="col-sm-12 va-container">
<div class="text-wrap va-middle">
<a href="javascript:show('link4')" id="link4" ><span id="titre4" class="nav-item-name" style="margin-left:46px;"> + Photos </span> </a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;"id="nav-item5">
<a>
<div class="row nav-item" style="width:222px;">
<div class="col-sm-12 va-container">
<div class="text-wrap va-middle">
<a href="javascript:show('link5')" id="link5" ><span id="titre5" class="nav-item-name" style="margin-left:46px;"> + Plus d'info </span> </a>
</div>
</div>
</div>
</a>
</li>
<!--li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;">
<a>
<div class="row nav-item" style="width:222px;">
<div class="col-sm-12 va-container">
<div class="text-wrap va-middle">
<a href="javascript:show('link5')" id="link5" ><span class="nav-item-name" style="margin-left:46px;"> + Plus d'info </span> </a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;">
<a>
<div class="row nav-item" style="width:222px;">
<div class="col-sm-12 va-container">
<div class="text-wrap va-middle">
<a href="javascript:show('link5')" id="link5" ><span class="nav-item-name" style="margin-left:46px;"> + Plus d'info </span> </a>
</div>
</div>
</div>
</a>
</li>
<li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;">
<a>
<div class="row nav-item">
<span class="nav-item-name" style="margin-left:66px;">
+Tarif
</span>
</div>
</a>
</li>
<li class="nav-item nav-basics pre-listed nav-active" style="width:222px;margin-left:2px;">
<a>
<div class="row nav-item">
<span class="nav-item-name" style="margin-left:66px;">
+ Calendrier
</span>
</div>
</a>
</li-->
</ul>
</div>
</div>
<div id="gen">
<!--div id="ent"> FORMULAIRE CLIENTS DEMANDE DE SERVICE </div><br>
<div class="com">Catégorie 1 : Famille </div><br>
<div id="grd"> Garde d’enfants </div> <br-->
<div id="ent2"> </div>
<form method="POST" onSubmit="return Validation()" enctype="multipart/form-data">
<div class="div" id="content1">
<table>
<tr>
<td> Nom : </td> <td> <input name="Nom" type="text" class="input-textarea half1" required /> </td>
</tr>
<tr>
<td> Prenom : </td> <td><input name="prenom" type="text" class="input-textarea half1" required /> </td>
</tr>
<tr>
<td><input name="Total" type="submit" value="Suivant" onclick="show('link2')" /></td>
</tr>
</table>
</div>
<div class="div" id="content2">
<table>
<tr>
<td> Adresse Complete : </td> <td><input name="adresCp" type="text" class="input-textarea half1" required /> </td>
</tr>
<tr>
<td><input name="Total" type="submit" value="Suivant" onclick="show('link3')" /></td>
</tr>
</table>
</div>
<div class="div" id="content3">
<table>
<tr>
<td> Telephone(mobile) : </td> <td><input name="telM" type="text" class="input-textarea half1" required /> </td>
</tr>
<tr>
<td> Telephone(fixe) : </td> <td><input name="telF" type="text" class="input-textarea half1" required /> </td>
</tr>
<tr>
<td style="width:315px;"> E-mail : </td> <td><input name="email" class="input-textarea half1" type="text" required /> </td>
</tr>
<tr>
<td><input name="Total" type="submit" value="Suivant" onclick="show('link4')" /></td>
</tr>
</table>
</div>
<div class="div" id="content4">
<table>
<tr>
<td style="width:315px;"> Les photos peuvent donner vie à votre logement </td>
</tr>
<tr>
<td style="width:315px;"> Ajouter une photo : </td> <td><input type="file" class="input-textarea half1" /></td>
</tr>
<tr>
<td><input name="Total" type="submit" value="Suivant" onclick="show('link5')"/></td>
</tr>
</table>
</div>
<div class="div" id="content5s">
<table>
<tr>
<td> Type de travaux :</td> <td><select name="type_trv">
<option selected="selected" hidden >-- Type Travaux --</option>
<option value="Jardinage">Jardinage</option>
<option value="bricolage">bricolage</option>
<option value="Gardiennage">Gardiennage</option>
<option value="Sécurite_prive">Sécurité privé</option>
</select> </td>
</tr>
<tr>
<td> Superficie du domicile : </td> <td><input name="supdomc" type="text" class="input-textarea half" required /> </td>
</tr>
<tr>
<td> nombre d’étages : </td> <td><input name="nbtag" type="number" min="1" max="10" class="input-textarea half" required /> </td>
</tr>
<tr>
<td> nombre chambre : </td> <td><input name="nbchmbr" type="number" min="1" max="10" class="input-textarea half" required /> </td>
</tr>
<tr>
<td>jours souhaité des travaux :</td> <td><input name="jrtv" type="text" class="input-textarea half" required ></number> </td>
</tr>
<tr>
<td>fréquence des travaux : </td> <td> <input name="frqte" type="text" class="input-textarea half" required /></td>
</tr>
<tr>
<td>demande spécifique :</td> <td><textarea name="dmdSpe" cols="50" rows="5" class="input-textarea half"></textarea> </td>
</tr>
<tr>
<td colspan="2" > <input name="Submit" type="Submit" value="Terminer les etapes ">
</td>
</tr>
</table>
</div>
</form>
<div id="footer" style="width:315px; height:100px; background-color: red; "> </div>
</body>
JS
<script>
function myfun() {
document.getElementById("ent2").innerHTML = "information de base";
document.getElementById("content1").style.visibility = 'visible';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
document.getElementById("content5s").style.visibility = 'hidden';
document.getElementById("content2").style.height = '0px';
document.getElementById("content3").style.height = '0px';
document.getElementById("content4").style.height = '0px';
document.getElementById("content5s").style.height = '0px';
}
</script>
<script type="text/javascript">
function show(id) {
document.getElementById("ent2").style.position = "relative";
if (id == 'link1') {
document.getElementById("ent2").innerHTML = "information de base";
var content1 = document.getElementById("content1");
document.getElementById("content1").style.visibility = 'visible';
document.getElementById("nav-item1").style.backgroundColor = '#EDEFE0';
document.getElementById("titre1").style.fontWeight = 'bolder';
document.getElementById("titre2").style.fontWeight = 'normal';
document.getElementById("titre3").style.fontWeight = 'normal';
document.getElementById("titre4").style.fontWeight = 'normal';
document.getElementById("titre5").style.fontWeight = 'normal';
document.getElementById("nav-item2").style.backgroundColor = '#edefed';
document.getElementById("nav-item3").style.backgroundColor = '#edefed';
document.getElementById("nav-item4").style.backgroundColor = '#edefed';
document.getElementById("nav-item5").style.backgroundColor = '#edefed';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
document.getElementById("content5s").style.visibility = 'hidden';
document.getElementById("result").innerHTML = content1.innerHTML;
} else if (id == 'link2') {
document.getElementById("ent2").innerHTML = "Adresse";
var content2 = document.getElementById("content2");
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'visible';
document.getElementById("nav-item1").style.backgroundColor = '#edefed';
document.getElementById("nav-item2").style.backgroundColor = '#EDEFE0';
document.getElementById("titre1").style.fontWeight = 'normal';
document.getElementById("titre2").style.fontWeight = 'bolder';
document.getElementById("titre3").style.fontWeight = 'normal';
document.getElementById("titre4").style.fontWeight = 'normal';
document.getElementById("titre5").style.fontWeight = 'normal';
document.getElementById("nav-item3").style.backgroundColor = '#edefed';
document.getElementById("nav-item4").style.backgroundColor = '#edefed';
document.getElementById("nav-item5").style.backgroundColor = '#edefed';
document.getElementById("content2").style.position = "absolute";
document.getElementById("content2").style.top = "40%";
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
document.getElementById("content5s").style.visibility = 'hidden';
document.getElementById("result").innerHTML = content2.innerHTML;
} else if (id == 'link3') {
document.getElementById("ent2").innerHTML = "Contact";
var content3 = document.getElementById("content3");
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = "visible";
document.getElementById("nav-item1").style.backgroundColor = '#edefed';
document.getElementById("nav-item2").style.backgroundColor = '#edefed';
document.getElementById("nav-item3").style.backgroundColor = '#EDEFE0';
document.getElementById("titre1").style.fontWeight = 'normal';
document.getElementById("titre2").style.fontWeight = 'normal';
document.getElementById("titre3").style.fontWeight = 'bolder';
document.getElementById("titre4").style.fontWeight = 'normal';
document.getElementById("titre5").style.fontWeight = 'normal';
document.getElementById("nav-item4").style.backgroundColor = '#edefed';
document.getElementById("nav-item5").style.backgroundColor = '#edefed';
document.getElementById("content3").style.position = "absolute";
document.getElementById("content3").style.top = "40%";
document.getElementById("content4").style.visibility = 'hidden';
document.getElementById("content5s").style.visibility = 'hidden';
document.getElementById("result").innerHTML = content3.innerHTML;
} else if (id == 'link4') {
document.getElementById("ent2").innerHTML = "Photos";
var content4 = document.getElementById("content4");
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'visible';
document.getElementById("nav-item1").style.backgroundColor = '#edefed';
document.getElementById("nav-item2").style.backgroundColor = '#edefed';
document.getElementById("nav-item3").style.backgroundColor = '#edefed';
document.getElementById("nav-item4").style.backgroundColor = '#EDEFE0';
document.getElementById("titre1").style.fontWeight = 'normal';
document.getElementById("titre2").style.fontWeight = 'normal';
document.getElementById("titre3").style.fontWeight = 'normal';
document.getElementById("titre4").style.fontWeight = 'bolder';
document.getElementById("titre5").style.fontWeight = 'normal';
document.getElementById("nav-item5").style.backgroundColor = '#edefed';
document.getElementById("content4").style.position = "absolute";
document.getElementById("content4").style.top = "40%";
document.getElementById("content5s").style.visibility = 'hidden';
document.getElementById("result").innerHTML = content4.innerHTML;
} else if (id == 'link5') {
/*document.getElementById("content5s").style.height='auto';
var calc = document.getElementById('content5s').offsetHeight;
alert(calc);*/
document.getElementById("ent2").innerHTML = "Plus d'info";
var content4 = document.getElementById("content5s");
document.getElementById("content1").style.visibility = 'hidden';
document.getElementById("content2").style.visibility = 'hidden';
document.getElementById("content3").style.visibility = 'hidden';
document.getElementById("content4").style.visibility = 'hidden';
document.getElementById("content5s").style.visibility = 'visible';
document.getElementById("nav-item4").style.backgroundColor = '#edefed';
document.getElementById("nav-item5").style.backgroundColor = '#EDEFE0';
document.getElementById("titre1").style.fontWeight = 'normal';
document.getElementById("titre2").style.fontWeight = 'normal';
document.getElementById("titre3").style.fontWeight = 'normal';
document.getElementById("titre4").style.fontWeight = 'normal';
document.getElementById("titre5").style.fontWeight = 'bolder';
document.getElementById("content5s").style.position = "absolute";
document.getElementById("content5s").style.top = "40%";
document.getElementById("content5s").style.height = '20%';
var calc = document.getElementById('content5s').offsetHeight;
alert(calc);
document.getElementById("result").innerHTML = content4.innerHTML;
}
}
function init() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
a.onclick = show;
}
window.onload = init;
</script>
答案 0 :(得分：1)
使用'display：none'cs隐藏除法而不是隐藏：隐藏。
display：absolute将div控制退出流程。
我建议删除'display：absolute;高度：0像素;最高：40％;'并添加'display：block'以显示元素。