Question

我有一个框，使用jquery显示所选文件的内容。该框的代码是

<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>

我希望close-lightbox div始终位于框的底部。所以它的css是

#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}

Div lightbox有overflow:auto。现在，如果lightbox-content不大并且它符合lightbox的固定大小，那么就没有滚动，而close-ligthbox确实出现在我想要的底部。但是如果lightbox-content很大并且不适合固定大小的灯箱，那么就会滚动但close-lightbox出现在灯箱底部之前向下滚动，这意味着它出现在中间lightbox-content。

我有什么建议可以解决这个问题吗？

Answer 1

您可以将灯箱包装在自己的包装中，并将close-lightbox相对于它放置。

HTML

<div class="lightbox-wrapper">
    <div class="lightbox">
        <div class="lightbox-content"></div>
        <div id="close-lightbox">Close</div>
    </div>
</div>

CSS

.lightbox-wrapper {
    position: relative;
}

#close-lightbox {
    position: absolute;
    bottom: 5px;
    left: 30%;
}

看看这个小提琴 - http://jsfiddle.net/joplomacedo/4chu6/

编辑如果你能够将灯箱的overflow:auto移动到灯箱内容 - ＆gt;，Ohgodwhy的解决方案实际上更干净了。当我参与其中时，我摆弄了他的解决方案 - http://jsfiddle.net/joplomacedo/4chu6/2/

Answer 2

.lightbox{
  height:auto;
  overflow:hidden;
}

.lightbox-content{
  height:270px;
  overflow:auto;  
}

根据您对灯箱的需求更改此高度。

在可滚动div中div的绝对位置不能正常工作

2 个答案: