CODEWITHSUNDEEP
cssoverflow
Elias Garcia
Elias Garcia

Reputation: 7282

Content behind a fixed element when overflow

as you can see in the codepen below, I have a small layout including a fixed header and a fixed sidebar. Inside the sidebar I have another div fixed at the bottom of it, so I want to scroll over the sidebar menu but with the sidebar footer fixed at the bottom (so I add the property overflow: auto; to the sidebar.

The problem is that when you make the screen smaller, you can scroll over the sidebar and the footer is fixed, but some content remains under the fixed div (and the scrollbar as well).

Why is this happening and how can I fix it? Thanks.

https://codepen.io/anon/pen/qXmxXa

Upvotes: 0

Views: 87

Answers (2)

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Some corrections need to be done.

First, you are suppose to set the overflow for .sidebar-body instead of .sidebar-container. Because your fixed footer is inside .sidebar-container and sibling of .sidebar-body.

And you are suppose to calculate height for .sidebar-body as you have to set overflow to it.

And and replace below CSS will help,

  1. Remove overflow from .sidebar-container
  2. Add height for your fixed footer so that you can calculate height of sidebar-body .sidebar-footer{height:35px;}
  3. Add below CSS .sidebar-body{height: calc(100% - 35px);overflow: auto;}

Upvotes: 1

Dmytro Lishtvan
Dmytro Lishtvan

Reputation: 808

add padding for your sidebar-container (fixed-footer height)

    padding-bottom: 37px;

Upvotes: 0

Related Questions