Question

这就是我所拥有的，我有这个：

CSS

.contentbox img {
    max-width:100% !important;
    height:auto;
    display:block;
    padding-top:100px;
}

.viewer-v3.lightbox {
    padding-top:2%;
    overflow: auto;
    display: block;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    top: 0;
    left: 0;
    background: black;
    background: rgba(0,0,0,0.8);
}


.contentbox {
    height: 100%;
    overflow: auto;
    width:100%;  
    float:left;
}


.borderLightbox
{
    border:#cccccc;
    border-width:2%;
    border-top-style:none;
    border-right-style:solid; 
    border-bottom-style :solid;
    border-left-style:solid;
    position:relative;
    /*
    Here edit widht of lightBox
    */
    width: 40%;
    /*
    #end
    */
    height: 93%;
    background-color:#e5e5e5;
    margin-left:auto;
    margin-right:auto;
    overflow: visible;
}

.headerLightbox
{
    position:fixed;
    background-color:#e5e5e5;
    border:#cccccc;
    border-width:1%;
    width: inherit;
    float:left;
    border-top-style:solid;
    border-right-style:none; 
    border-bottom-style :none;
    border-left-style:none;
}

.actionsLightbox
{
    background-color:#ffffff;
    width:96%;
    float:left;
    padding-top:5px;;
    padding-bottom:5px;
    padding-left:2%;
    padding-right:2%;
}
.titleLightbox
{
    color:#27aae4;
    width:96%;
    float:left;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:2%;
    padding-right:2%;

}
.titleLinkLightbox
{
    float:left;
}
.filetypeLightbox
{
    float:left;
    width:100%;
    text-align:left;
    color:#a5a5a5;
}
.closeLightbox
{
    float:right;
    text-decoration:none;
    display:block;
    background-image:url(lightboxIcons.png);
    background-position: 318px 0;
    background-size: cover;
    height:24px;
    width:24px;
}
.printLightbox
{
    float:left;
    text-decoration:none;
    display:block;
    background-image:url(lightboxIcons.png);
    background-position: 0px 0;
    background-size: cover;
    height:24px;
    width:24px;
}
.zoomLightbox
{
    float:right;
    text-decoration:none;
    display:block;
    background-image:url(lightboxIcons.png);
    background-position: 61px 0;
    background-size: cover;
    height:24px;
    width:26px; 
}
.actionsPageLightbox
{
    float:left;
    margin-left:auto;
    margin-right:auto;
    width:50%;
    border:#cccccc;
    border-width:1px;
    border-top-style:none;
    border-right-style:solid; 
    border-bottom-style :none;
    border-left-style:solid;
    margin-left:10%;
    padding-left:2%;
    pading-right

}
.prevLightbox
{
    float:left;
    text-decoration:none;
    display:block;
    background-image:url(lightboxIcons.png);
    background-position: 245px 0;
    background-size: cover;
    height:24px;
    width:24px; 
}
.nextLightbox
{
    float:left;
    text-decoration:none;
    display:block;
    background-image:url(lightboxIcons.png);
    background-position: 198px 0;
    background-size: cover;
    height:24px;
    width:24px; 


}
.minusLightbox
{

    float:left;
    text-decoration:none;
    display:block;
    background-image:url(lightboxIcons.png);
    background-position: 160px 0;
    background-size: cover;
    height:24px;
    width:24px;
}
.plusLightbox
{
    float:left;
    text-decoration:none;
    display:block;
    background-image:url(lightboxIcons.png);
    background-position: 112px 0;
    background-size: cover;
    height:24px;
    width:24px;


}
.inputLightbox
{
    float:left;
    width:5%;
}
.currentPageLightbox
{
    float:left;
}

这是HTML

<div class="viewer-v3 lightbox">
  <div class="borderLightbox">


      <div class="headerLightbox">

      <div class="titleLightbox">
        <span class="titleLinkLightbox">
           FileDeleteImeg.jpg
           </span>
           <a class="closeLightbox" href="#"></a>
        <span class="filetypeLightbox">Adobe Views file</span>
       </div>

        <div class="actionsLightbox">
            <a class="printLightbox" href="#"></a>
               <div class="actionsPageLightbox">
                    <a class="prevLightbox" href="#"></a>
                    <input type="text" name="LastName" class="inputLightbox">
                    <span class="currentPageLightbox">/ 12</span>
                    <a class="nextLightbox" href="#"></a>
                    <a class="minusLightbox" href="#"></a>
                    <a class="plusLightbox" href="#"></a>
                </div>
             <a class="zoomLightbox" href="#"></a>
         </div>

        </div>

        <div class="contentbox">
           <img src="http://fc08.deviantart.net/fs51/f/2009/281/e/2/Paint_Tool_SAI_tutorial_IS_BIG_by_Left_Right_Wrong.png">
        </div>

 </div>
</div>

这是我的问题，我已经在图像上滚动并且工作正常，但是scrool正在得到固定的标题元素，甚至预先设定我已经添加了边缘到图片下面的标题，我的问题是如何把滚动bas放在固定的标题下，有人有解决方案吗？

这里有一个小提琴，无论我的问题，你看到scrool bar正在固定的标题下，任何解决方案？

http://jsfiddle.net/Fmh5p/

Answer 1

您可以将图片上padding-top的值更改为内容框上的border-top，以使其与滚动一起使用时使用此功能：

.contentbox {
  border-top:100px solid transparent;
  box-sizing:border-box;
}

选中 Demo Fiddle

_{注意：属性框大小有助于保持容器的实际100％高度，请注意此属性仅适用于IE＆gt; = 8}

滚动得到固定元素？

1 个答案: