Fixed Sidebar and Footer

Question

I'm trying to achieve a fixed sidebar where the footer should not interfere with the fixed sidebar.

<body>
    <div>
        <div class="sidebar"> <!-- Fixed sidebar -->
        </div>
        <div class="content">
            <!-- Long article -->
        </div>
    </div>
    <div class="footer">
    </div>
</body>

What's the status of your issue ? Is it fixed ? Did our answers help at all ? — Jake, Apr 23 '19 at 08:09

score 1 · Answer 1 · answered Apr 03 '19 at 07:20

If you inspect Google's code for this page, you'll see that the element is set to position: fixed once you've scrolled a certain amount as well as a top value set to the header's height.

It's max-height is lowered as the window's height lowers.

If you're satisfied with its browser support you could try position: sticky although I would advise not too as it's still only truly compatible with Firefox & Safari's latest versions.

You'll have to set your sidebar to position: fixed and adjust its position values using JavaScript on scroll. Or set it to fixed from the get-go and use z-index on your footer to cover it.

score 1 · Accepted Answer · answered Apr 03 '19 at 07:24

1

You can use this code to fixate elements to viewport.

.sidebar {
  position: fixed;
  top: 100px; /* below the header */
  height: calc(100% - 200px); /* substract the height of the header and footer */
}

You should have a look at this answer for the CSS3 calc-function: https://stackoverflow.com/a/14101451

answered Apr 03 '19 at 07:24

Screenload

431
2
14

I would suggest using `max-height` instead of `height`. – Jake Apr 03 '19 at 07:26

Fixed Sidebar and Footer

2 Answers2