1

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

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

我希望关闭灯箱 div 始终位于框的底部。所以它的 css 是

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

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

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

4

2 回答 2

0

您可以将灯箱包装在它自己的包装器中，并相对于它定位关闭灯箱。

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/

编辑Ohgodwhy 的解决方案实际上更清洁，如果你能够将灯箱移动overflow:auto到灯箱内容 - >当我在它的时候，我对他的解决方案做了摆弄 - http://jsfiddle.net/joplomacedo/4chu6/2/

于 2012-07-08T17:34:55.067 回答
0 
.lightbox{
  height:auto;
  overflow:hidden;
}

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

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

于 2012-07-08T17:36:32.440 回答