Scroll Part of Content in Fixed Position Container

Scroll part of content in fixed position container

It seems to work if you use

div#scrollable {
    overflow-y: scroll;
    height: 100%;
}

and add padding-bottom: 60px to div.sidebar.

For example: http://jsfiddle.net/AKL35/6/

However, I am unsure why it must be 60px.

Also, you missed the f from overflow-y: scroll;

Have a fixed position div that needs to scroll if content overflows

The problem with using height:100% is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it

You can use fixed to accomplish what you're trying to do.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

This fork of your fiddle shows my fix:
http://jsfiddle.net/strider820/84AsW/1/

How to let div overlap a position: fixed container and scroll vertically with fixed containers content

To the best of my knowledge, the only way to allow child elements to be displayed outside of their parent container in this regard is to use

overflow: visible;

or, in your case:

overflow-x: visible;

on the parent container.

Unfortunately, you also want to be able to vertically scroll, which will take precedence over the visibility parameter regardless of the axis it is appended to. Forcing the children to be clipped to the parent dimensions.

Source:
https://www.w3.org/TR/css-overflow-3/#valdef-overflow-scroll

"This value indicates that the content is clipped to the padding
box, ..."

More information about this conflict/issue:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

https://www.w3.org/TR/css-overflow-3/#scrollable-overflow

If you find a CSS only workaround I'm sure the rest of us would like to know! But it appears you may have to have a non-scrollable sidebar or utilize a different design.

Scroll over content with fixed position and specified top property drops the last part

Your .list has height: 100vh, so it will occupie the equivalent of 100% of the screen's height no matter its position.

One solution would be setting the list height to calc(100vh - 50px). I've edited the fiddle.

The calc function allows you to execute calculation when specifying a css property. More information here.

Place an item at a fixed position in a scrolling div

A standardly supported way is to edit the HTML markup and add a wrapper element to both the scrollable and the "fixed" element - which will now have position: absolute; instead:

#wrapper {  /* ADDED */

  position: relative;

  width: 200px;

}

#scrollable {

  height: 100px;

  border: 1px solid;

  overflow: auto;

  position: relative;

}

#wrapperFooter {

  background: red;

  position: absolute; /**/

  bottom:0;

}

<div id="wrapper">

  <div id="scrollable">

    <p style="border: 4px dashed #000; height: 200px;"></p>

  </div>

  <div id="wrapperFooter">ABSOLUTELY! :)</div>

</div>

---

Related Topics