fixe div avec du contenu dynamique pas de défilement

J'ai un fixe div avec la dynamique chargé li éléments. Maintenant, je veux le div contenu de défilement quand il y a plus de 9 li éléments et une barre de défilement:

C'est à quoi il ressemble:

Au moment de l'fixe div va sur le dessus du pied de page et le contenu ne peuvent pas être affichés.

Voici le css pour tous les 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

ajouter overflow:scroll de votre fixe div. et donnez de la hauteur à la div.
Veuillez inclure du code HTML: est fixe div à l'intérieur absolue-div? Vous pouvez probablement le fixer avec overflow:auto fixe, div, mais c'est dur à dire sans balisage
ajouter ovrflow:faire défiler dans votre div
en termes simples, vous pouvez atteindre vos résultats souhaités par (overflow:scroll;) mais si u besoin de plus donc, veuillez en faire la démonstration en ligne de votre code HTML et CSS pour nous ce serait beaucoup mieux pour nous aider à sortir de la u
overflow:scroll fonctionne mais seulement avec une hauteur spécifique. Est-il possible de faire cela avec hauteur:100%?
il dépend de votre contenu et selon qu'il obtenir de débordement
pourquoi ne pas vous fixer la hauteur du conteneur à height: 100vh pour remplir la fenêtre d'affichage, puis utiliser overflow-y: scroll, vous devez utiliser un peu de javascript pour forcer la hauteur sur les anciennes versions de navigateur si height: 100% ne fonctionne pas

InformationsquelleAutor Marcel | 2013-07-26

6

Ajouter ceci dans votre css:
```
#results {        
height: 100%; 
overflow-y: scroll; /* adds scrollbar */
}
```
- merci cela fonctionne, mais avec des hauteur spécifique. Est-il possible de faire cela avec toute la hauteur du pied de page?
- J'ai juste édité, ne sais pas si le commentaire était avant ou après la modification. Cette version s'applique uniquement aux résultats div afin de ne pas affecter div extérieure
InformationsquelleAutor Tanner
0

Vous pouvez le faire avec un positionnement absolu. Vous avez encore besoin de overflow-y: scroll. Absolument position au sommet de la partie dynamique de la hauteur totale de l'élément fixe au-dessus d'elle et la partie inférieure à la hauteur totale de l'élément fixe en dessous. Peut-être besoin de tordre légèrement, mais cela devrait faire l'affaire de consommer l'intermédiaire de l'espace et du défilement de la zone de débordement.

InformationsquelleAutor FoolishSeth

Vous devez vous connecter pour publier un commentaire.