最近我问了这个问题:溢出(滚动) - 100%容器高度关于如何实现具有可变高度的垂直滚动div.
一个非常有用的用户提供了一个使用绝对定位和高度的解决方案:100%,这里:http://jsfiddle.net/TUwej/2/.在这个小提琴中,您可以看到基本的所需行为 - 滚动div将填充主容器的高度,这由'#main'元素中的内容决定.
我有点修改并使用top:0 bottom:0而不是height:100%以容纳可滚动区域上方的元素.修改后的版本可以在这里看到:http://jsfiddle.net/N6muv/3/(我意识到有一些额外的标记和类定义是空的,并且相邻的兄弟组合似乎是多余的 - 这些是实际结构)
一切都很好,除了我必须为滚动div提供一个固定的顶部坐标(注意顶部:'.sidebar-list'选择器的120px声明).我想这是相对于它上面的'.sidebar-options'元素,所以上面的选项容器可以有任意数量的选项,可滚动的div将适当地定位自己.使用固定坐标,如果添加或删除任何选项,则会发生重叠或产生不必要的空间 - 我想避免这种情况.应该出现的确切选项数量因视图而异.
我曾想过将滚动div包装在一个相对定位的容器中,但这样做会产生与bottom的冲突:0不再指示主'.wrapper'容器的高度(应该这样做).类似地,使用height:100%将使用'.wrapper'容器的计算高度,因此可滚动div将超出'.wrapper'的边界.
有没有办法保持第二个小提琴中显示的功能,但可滚动div的顶部相对于选项div的底部(可变高度)？
在此先感谢您的任何建议.
编辑:SO问我是否想要开始赏金,所以我做了(第一次) - 希望100分不算太低.仍然在寻找一个无脚本的纯css解决方案,它不涉及y轴的固定坐标或尺寸(宽度和左侧分配都可以).谢谢
我希望能够将显示器和屏幕上的元素固定在同一位置，但不想使用position:fixed，因为它会导致其他元素出现问题。我希望该元素位于其他元素之上，因此我使用了 z-index。另外，我希望元素能够从一侧移动到另一侧，但不能在显示屏上滚动。以下是我正在使用的代码：
<div style="position:relative;z-index:3;height:100%">
<div style="position:absolute;bottom: -460px;right:-30px;height:100%;">
<div style="position: sticky;top: 800px;">
<a class="btn btn-default dropdown-toggle" style="background-color:#00AF95;border-radius:50%;margin-left:100px;" data-toggle="dropdown" onclick="$('#floatingButton').toggle();" data-hover="dropdown" aria-expanded="true">
<i class="fa fa-plus" style="background-color:#00AF95;color:#f7f8fa"></i>
</a>
<div class="dropdown dropdown-inline" style="width:250px;display:block;bottom:80px;">
<ul class="dropdown-menu SMSUI" role="menu" id="floatingButton" style="display: block;">
<li class="dropdown" data-hover="dropdown" title="Send SMS to a Number"[enter image description here][1] onclick="(this.event.stopPropagation());">
<div id="numberDialerField" class="pad10R pad10L">
<input type="text" id="phoneCodeNumber" style="margin-left:10px;width:60px;" name="phoneCode" class="softphone-form-control" data-i18n="[placeholder]phonecode" placeholder="Ph. Code" value="">
<span>-</span>
<input type="text" id="telNumber" name="phoneNumber" class="softphone-form-control" data-i18n="[placeholder]label_phone_number" placeholder="Phone Number" value="" required="">
<div class="telFuncBtnDiv">
<span id="backspaceBtnSpan" class="cursor-pointer">
<i class="fa …