нижний колонтитул пересекается с другими divs

-2

Я пошел, что div нижнего колонтитула будет dynamique, когда я выберу, чтобы увеличить другие divs, они пересекают мой нижний колонтитул здесь все мой код plz нарисовал его на вашем навигаторе и проверил его, чтобы показать результат там is on dropbox: https://www.dropbox.com/s/sxcd6unqilnemme/form.html?dl=0 Я хочу, чтобы он сидел ниже второго ряда контента, но я не могу заставить его это делать, все еще сидя в нижней части содержимого, когда есть меньше контента.нижний колонтитул пересекается с другими divs

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>

<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>

источник

2016-01-13 xayd yazid

, пожалуйста, добавьте минимальный код для воссоздания вашей проблемы в рамках своего вопроса. – Aaron

@ Аарон это большой plz скачать его и показать его –

Используйте 'дисплей: нет' CSS для сокрытия разделения вместо видимость: скрытый.

дисплей: абсолютный возьмут управление div из потока.

Я рекомендую удалить 'display: absolute; высота: 0px; наверх: 40%; и добавление «display: block» для отображения элемента.

источник

2016-01-13 10:48:15 Penchalaiah

thanx это работает со мной thanx в другое время @Penchalaiah –

нижний колонтитул пересекается с другими divs

ответ

Смежные вопросы