1

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%;}

Divlightboxは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 に答える