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

by

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/

More Related Contents:

  1. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  2. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  3. Why can’t an element with a z-index value cover its child?
  4. Limit text length to n lines using CSS
  5. CSS text-overflow in a table cell?
  6. Make div stay at bottom of page’s content all the time even when there are scrollbars
  7. Why does applying a CSS-Filter on the parent break the child positioning?
  8. parent & child with position fixed, parent overflow:hidden bug
  9. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  10. How to make fixed header table inside scrollable div?
  11. What are `scrolling boxes`?
  12. Fixed sidebar navigation in fluid twitter bootstrap 2.0
  13. Position absolute and overflow hidden
  14. What are the default top, left, botton or right values when position:absolute is used?
  15. Pure CSS scroll animation
  16. Difference between static and relative positioning
  17. Set Google Maps Container DIV width and height 100%
  18. Div height 100% and expands to fit content [duplicate]
  19. CSS: Top vs Margin-top
  20. pure CSS multiple stacked position sticky?
  21. Scrollbar color change in Firefox
  22. CSS: display:inline-block and positioning:absolute
  23. Overflow to left instead of right
  24. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  25. Targeting position:sticky elements that are currently in a ‘stuck’ state
  26. object-fit, object-positioning and absolute positioning
  27. How to ignore parent element’s overflow:hidden in css
  28. position:fixed when left/top/right/bottom aren’t specified – desired results in FF/IE, but not in Safari
  29. Issue when centering vertically with flexbox when heights are unknown
  30. overflow: hidden on div and body, different behavior

Leave a Comment