All geek questions in one place

Fixed div with dynamic content rather than scrolling

I have a fixed div with dynamically loaded li elements. Now I want div content to scroll when there are more than 9 li elements and scrollbars:

It looks like this:

enter image description here

Currently, a fixed div continues above the footer, and the content cannot be scrolled.

Here is the css for all 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; }

And here is the 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>

Thanks a lot! Marseilles

+6
source share
2 answers

Add this to your css:

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

You can do this with absolute positioning. You still need overflow-y: scroll . Absolutely place the top of the dynamic section to the total height of the stationary elements above it, and the bottom to the total height of the stationary elements below it. You may need to tweak a bit, but this should do the trick of consuming the entire intermediate space and scroll overflow.

0
source

Source: https://habr.com/ru/post/950346/

More articles:


All Articles