The easiest approach would be to relatively position the #my-details
element as opposed to absolutely positioning it. You could then simply use margin:0 auto
to center the element. Since the element is no longer absolutely positioned, you need to give it a height of 100%
. To displace top:20px
, you could simply use calc()
like so: height: calc(100% - 20px)
.
#my-details {
position:relative;
margin:0 auto;
height:calc(100% - 20px);
width: 50%;
max-width: 450px;
top: 20px;
background-color: yellow;
bottom: 0px;
overflow: scroll;
}
As an alternative, you could change top:20px
to a percentage based value such as 2%
. You could then simply use a height of 98%
and avoid having to use calc()
. Since that may not be an optimal solution, you could also use the following:
#fix {
padding-top:1em;
}
#my-wrap {
padding-top:20px;
}
Basically, this method avoids top:20px
by adding a padding-top
value on the parent element instead. The parent of that element then receives a padding-top
value of 1em
to displace the margin: 1em auto
.