固定div与动态内容不滚动

Question

I have a fixed div with dynamic loaded li elements. 我有一个固定的div与动态加载的li元素。 Now I want the div-content to scroll when there are more than 9 li elements and a scroll-bar: 现在我希望div-content在有超过9个li元素和滚动条时滚动：

This is what it looks like: 这就是它的样子：

在此输入图像描述

At the moment the fixed div goes on over the footer and the content can not be scrolled. 此时固定的div继续在页脚上，内容无法滚动。

Here is the css for all divs : 这是所有divs的css：

#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's the HTML: 这是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! 非常感谢！ Marcel 马塞尔

Answer 1

Add this to your css: 将此添加到您的CSS：

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

Answer 2

You can do this with absolute positioning. 你可以用绝对定位来做到这一点。 You still need overflow-y: scroll . 你仍然需要overflow-y: scroll 。 Absolutely position the top of the dynamic section to the total height of the fixed elements above it and the bottom to the total height of the fixed elements below it. 绝对地将动态部分的顶部定位到其上方的固定元件的总高度，并将底部定位到其下方的固定元件的总高度。 May need to tweak slightly but that should do the trick of consuming all the intermediate space and scrolling the overflow. 可能需要略微调整，但这应该是消耗所有中间空间和滚动溢出的技巧。

固定div与动态内容不滚动

问题描述

2 个解决方案

解决方案1
6 2013-07-26 11:22:07

解决方案2
0 2014-03-31 02:06:50

固定div与动态内容不滚动

问题描述

2 个解决方案

解决方案1 6 2013-07-26 11:22:07

解决方案2 0 2014-03-31 02:06:50

解决方案1
6 2013-07-26 11:22:07

解决方案2
0 2014-03-31 02:06:50