Search code examples
htmlcssscrollpositionfixed

HTML/CSS/JS content scrollbar under fixed div

Hi my question is can somebody help me to become the scrollbar of my content over the footer.

How it looks on the browser

And here code snippets

HTML:

<body>
    <div class="major">
        <div class="torso">
        <div id="gallery">
        </div>
        <div class="bone">
            <div class="aero">
                Menu
            </div>
            <div class="magneticaero">
                <a href="index.html" class="geo">
                    <div class="chest">
                        <div class="flaticon-house158">
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</body>

CSS:

html,head,body,p,div,a,ul,h2{
margin: 0;
padding: 0;
font-family: sans-serif,Century Gothic,CenturyGothic,AppleGothic;
text-decoration: none;}

.major{
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;}

.torso{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-y: scroll;}

.bone{
width: 100%;
height: 70px;
margin: 0;
padding: 0;
bottom: 0;
position: fixed;
background-color: #C2C2C2;
text-align: center;
transition: 1s;}

.aero{
width: 100%;
height: 40px;
box-shadow: 0 0 1px #FFF;
padding-top: 15px;
padding-bottom: 15px;
font-size: 30px;
font-weight: bold;
color: #FFF;}

.magneticareo{
width: 100%;
height: 360px;}

.chest{
width: 25%;
height: 350px;
box-shadow: 0 0 1px #FFF;
float: left;
font-size: 25px;
font-weight: bold;
color: #FFF;}

.boneup{
height: 350px;}

.photo{
width: 100%;
height: auto;
padding: 0;
margin: 0;}

.order{
width: 20%;
height: auto;
padding: 0;
margin: 0;
float: left;}

The solution i search

I'd be really thankful when somebody could help me :-) Tim

Solution

  • Take .aero OUT of all the other elements, move it down directly above </body>, and give it a fixed position with bottom: 0

    I addition, set the height of .major to calc(100% - 40px) , i.e. as high as the window minus the height of .aero. (And use box-sizing: border-box on it to really only make it 40px high.)

    ADDITION after seeing website: Assign height: calc(100% - 70px); to .torso-gallery - this has the same effect I described above and you won't need to change your HTML structure anymore.