Scroll getting under the fixed element? - html

Question

This is what I have issuse, I have this one:
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;
}
and here is 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>
This is mine problem, i have scroll on the image and working ok, but the scrool is getting under header element that is fixed, even to prevenet that i have addded margines to picture to be under header, mine question is how to put scroll bas under the fixed header, does anyone have solution?
here is a fiddle, abaout mine problem, you see scrool bar is going under the fixed header, any solution?
http://jsfiddle.net/Fmh5p/

Answer 1

You can change the value of padding-top on the image to the border-top on contentbox, to make it work with the scroll use this:
.contentbox {
border-top:100px solid transparent;
box-sizing:border-box;
}
Check this Demo Fiddle
Note : The property box-sizing helps to keep the real 100% height of the container, note that this property only works on IE>=8