div fixe avec le contenu dynamique ne pas de défilement

J'ai un div fixe avec li éléments chargés dynamiques. Maintenant, je veux que le div contenu pour faire défiler quand il y a plus de 9 li éléments et une barre de défilement:div fixe avec le contenu dynamique ne pas de défilement

Voici ce qu'il ressemble à:

enter image description here

Au moment où le div fixe va sur le pied de page et le contenu ne peut pas être défilé.

Voici le css pour tous divs:

#fixed-div { 
    position: fixed; 
    width: 30%; 
    margin-top:290px; 
    padding-top:20px; 
    padding-bottom: 20px; /* must be same height as the footer */ 
    background-color: rgba(255, 255, 255, 0.60); 
    min-height: 100%; 
} 

#absolute-div { 
    padding: 15px; 
    background-color: rgba(255, 255, 255, 0.60); 
    margin-bottom: 10px; 
    position: relative; 
    height: 200px; 
} 
#footer { 
    position: relative; 
    margin-top: -33px; /* negative value of footer height */ 
    height: 20px; 
    line-height: 33px; 
    border-bottom:20px solid #fff; 
    text-align: left; 
    background-color:#fff; 
    padding-left:10px; 
} 
#map_canvas { /* background */ 
    clear:left; 
    float: left; 
    width: 100%; 
    min-height: 100%; 
    z-index:-1001; 
/* height: 530px;*/ 
    -webkit-box-shadow: 0px 0px 10px #888; 
    -moz-box-shadow: 0px 0px 10px #888; 
}

Et voici le code HTML:

<body> 

       <div id="searchbox"> 

       <div id="absolute-div" class="clear-block"> 


         <form method="post" action="./index.php" accept-charset="UTF-8" method="post" id="clinic-finder-form" class="clear-block" class="clear-block"> 


          <label for="edit-gmap-address">Standort angeben und Vorteile in der Umgebung finden: </label> 
          <input type="text" maxlength="128" name="address" id="address" size="60" value="" class="form-text" autocomplete="off" /> 
       <?php 
          // support unicode 
          mysql_query("SET NAMES utf8"); 
          $cats = $db->get_rows("SELECT categories.* FROM categories WHERE categories.id!='' ORDER BY categories.cat_name ASC"); 

          ?> 


          <select name="products" class="form-select" id="edit-products" ><option value="">Alle Kategorien</option> 
          <?php if(!empty($cats)): ?> 
           <?php foreach($cats as $k=>$v): ?> 
           <option value="<?php echo $v['id']; ?>"><?php echo $v['cat_name']; ?></option> 
           <?php endforeach; ?> 
           <?php endif; ?> 
          </select> 


          <input type="submit" name="op" id="edit-submit" value="Vorteile finden" class="btn btn-primary" /> 
          <input type="hidden" name="form_build_id" id="form-0168068fce35cf80f346d6c1dbd7344e" value="form-0168068fce35cf80f346d6c1dbd7344e" /> 
          <input type="hidden" name="form_id" id="edit-clinic-finder-form" value="clinic_finder_form" /> 

          <input type="button" name="op" onclick="document.location.href='newstore.php'" id="edit-submit" value="Unternehmen vorschlagen" class="btn btn-primary" /> 


          </form> 

</div></div> 
     <div id="fixed-div"> 
         <div id="clinic-finder" class="clear-block"> 
         <div id="results">   


         <ol style="display: block; " id="list"></ol> 
         </div> 
         </div> 

     </div> 

    <div id="map_canvas"></div> 
    <div id="footer">&copy; 2008-2013 Ihr Vorteilsclub - Impressum</div>

Merci beaucoup! Marcel

Source

2013-07-26 Marcel

ajouter un dépassement: faites défiler jusqu'à votre div fixe. et donnez une hauteur spécifique à cette div. –

S'il vous plaît inclure un peu de HTML: est-div divisée dans absolute-div? Vous pouvez probablement le corriger avec 'overflow: auto' sur fixed-div, mais il est difficile de le dire sans un balisage – jalynn2

ajouter ovrflow: faites défiler dans votre div –

Ajouter à votre css:

#results {   
    height: 100%; 
    overflow-y: scroll; /* adds scrollbar */ 
}

Source

2013-07-26 11:22:07 Tanner

merci cela fonctionne mais aussi seulement avec une hauteur spécifique. Y at-il un moyen de le faire avec toute la hauteur du pied de page? – Marcel

Je viens d'éditer, je ne sais pas si le commentaire était avant ou après l'édition. Cette version ne s'applique qu'aux résultats div afin de ne pas affecter la div – Tanner

Vous pouvez le faire avec le positionnement absolu. Vous avez toujours besoin de overflow-y: scroll. Positionnez absolument le haut de la section dynamique à la hauteur totale des éléments fixes au-dessus et du bas à la hauteur totale des éléments fixes en dessous. Peut-être besoin de modifier légèrement mais cela devrait faire l'affaire de consommer tout l'espace intermédiaire et de faire défiler le débordement.

Source

2014-03-31 02:06:50 FoolishSeth

div fixe avec le contenu dynamique ne pas de défilement

Répondre

Questions connexes