Geek Answers Handbook

Use full width excluding overflow scrollbar with "position: absolute"

I would like to have a small red div with full width at a fixed top position, inside another div that has overflow: scroll . I hope jsFiddle makes it clear: http://jsfiddle.net/mCYLm/2/ .

The problem is that the red div overlaps the scroll bar. I think right: 0 means the right side of the div.wrapper ; it does not subtract the scroll div.main . When I move overflow: scroll to div.wrapper , the red banner has the desired size ( fiddle ). However, it is no longer in a fixed position (scrolling down scrolls the banner up).

How can I achieve the following two things?

  • The red banner is in a fixed position, as in this violin .
  • The red banner has a full width, except for the scroll bar, as in this violin .

I want this to work in Google Chrome.

HTML:

 <div class="wrapper"> <div class="red-banner"></div> <div class="main"> <div class="item">foo</div> <div class="item">foo</div> <div class="item">foo</div> <div class="item">foo</div> </div> </div>​

CSS

 div.wrapper { position: relative; } div.main { height: 200px; overflow-y: scroll; } div.item { border: 1px solid black; margin: 20px; padding: 20px; } div.red-banner { background-color: red; position: absolute; left: 0; top: 0; right: 0; height: 20px; }
+7
source share
2 answers

This seems to be impossible with pure CSS, so JavaScript (jQuery) is hacked here:

 $(function() { var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body"); var $child = $("<div>").css({ height: 2 }).appendTo($container); window.SCROLLBAR_WIDTH = $container.width() - $child.width(); $container.remove(); });

then

 $("div.red-banner").css({ right: SCROLLBAR_WIDTH });
+5
source

HTML

 <div class="scroller"> <div class="banner-wrapper"> <div class="banner"></div> </div> </div> <div class="main"> <div class="item">foo</div> <div class="item">foo</div> <div class="item">foo</div> <div class="item">foo</div> </div>​

CSS

 * { margin: 0; padding: 0 } body { padding-top: 30px; } div.main { height: 200px; width: 100%; overflow-y: scroll; position: absolute; z-index: 50; background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0))); } div.item { border: 1px solid black; margin: 20px; padding: 20px; } div.scroller { height: 20px; width: 100%; position: absolute; z-index: 100; overflow: hidden; } div.banner-wrapper { background: transparent; position: relative; height: 20px; overflow-y: scroll; left: 0; margin-right: -20px; } div.banner { height: 20px; background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));; margin-left: 20px; margin-right: 40px; }

Development Version: http://jsfiddle.net/mCYLm/13/
Final version: http://jsfiddle.net/mCYLm/14/

Works with scaling and variable width of the viewport.
! BUG : the scroll button in the upper right is unavailable / clickable.

Tested:

  • IE6,7,8,9 (windows)
  • FF11 (Windows)
  • Google Chrome 18 (ubuntu)
  • Safari 5.1 (OSX)
+1
source

More articles:


All Articles