位置绝对+滚动
使用下面的HTML和CSS
.container { position: relative; border: solid 1px red; height: 256px; width: 256px; overflow: auto; } .full-height { position: absolute; top: 0; left: 0; right: 128px; bottom: 0; background: blue; }
<div class="container"> <div class="full-height"> </div> </div>
内部div需要占用容器的全部头部。 如果我现在添加一些其他的stream，内容到容器如：
.container { position: relative; border: solid 1px red; height: 256px; width: 256px; overflow: auto; } .full-height { position: absolute; top: 0; left: 0; right: 128px; bottom: 0; background: blue; }
<div class="container"> <div class="full-height"> </div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem. </div>
然后容器根据需要滚动，但绝对定位的元素不再锚定在容器的底部，而是停留在容器的初始可见底部。 我的问题是 有什么办法让绝对定位的元素是不使用JS容器的完整滚动高度？
您需要将文本包装在div元素中，并在其中包含绝对定位的元素。
<div class="container"> <div class="inner"> <div class="full-height"></div> [Your text here] </div> </div>
CSS：
.inner: { position: relative; height: auto; } .full-height: { height: 100%; }
将内部div的位置设置为relative使得它内部的绝对位置元素基于它的位置和高度，而不是基于具有固定高度的.container div。 如果没有内部相对定位的div ，那么.full-height div将总是基于.container计算其尺寸和位置。
position: fixed; 将解决你的问题。 作为一个例子，查看我的固定消息区域覆盖的实现（以编程方式填充）：
#mess { position: fixed; background-color: black; top: 20px; right: 50px; height: 10px; width: 600px; z-index: 1000; }
并在HTML中
<body> <div id="mess"></div> <div id="data"> Much content goes here. </div> </body>
当#data变得更长时， #mess保持它在屏幕上的位置，而#data在它下面滚动。
所以gaiour是正确的，但如果你正在寻找一个完整的高度项目不滚动的内容，但实际上是容器的高度，这是修复。 有一个导致溢出的高度的父母，一个100％高度的内容容器和overflow: scroll ，然后兄弟可以根据父母的大小定位，而不是滚动元素的大小。 这是小提琴： http : //jsfiddle.net/M5cTN/196/
和相关的代码：
HTML：
<div class="container"> <div class="inner"> Lorem ipsum ... </div> <div class="full-height"></div> </div>
CSS：
.container{ height: 256px; position: relative; } .inner{ height: 100%; overflow: scroll; } .full-height{ position: absolute; left: 0; width: 20%; top: 0; height: 100%; }
