Html 固定 div 动态内容不滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17879945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fixed div with dynamic content not scrolling
提问by Marcel
I have a fixed div with dynamic loaded lielements. Now I want the div-content to scroll when there are more than 9 lielements and a scroll-bar:
我有一个带有动态加载li元素的固定 div 。现在我希望 div 内容在超过 9 个li元素和滚动条时滚动：
This is what it looks like:
这是它的样子：
At the moment the fixed divgoes on over the footer and the content can not be scrolled.
目前固定div继续在页脚上，内容无法滚动。
Here is the css for all divs:
这是所有人的css 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'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">© 2008-2013 Ihr Vorteilsclub - Impressum</div>
Thanks a lot! Marcel
非常感谢！马塞尔
回答by Tanner
Add this to your css:
将此添加到您的CSS：
#results {
height: 100%;
overflow-y: scroll; /* adds scrollbar */
}
回答by FoolishSeth
You can do this with absolute positioning. You still need 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.
您可以使用绝对定位来做到这一点。你仍然需要overflow-y: scroll. 将动态部分的顶部绝对定位到其上方固定元素的总高度，将底部绝对定位到其下方固定元素的总高度。可能需要稍微调整一下，但这应该可以消耗所有中间空间并滚动溢出。
