开发者

Hide scrollbar on absolute positioned div

开发者 https://www.devze.com 2023-03-23 03:32 出处:网络
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn\'t need to be seen all the time. The prob

I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.

If you inspect the element with firebug, just place it over the shadow behind the slider and y开发者_开发技巧ou will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it. View link

Can anyone let me know how to stop the scrollbar appearing for the shadow div?

Cheers Nik


It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.

You can use the CSS overflow-x:hidden on the body element.

Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.


Firstly, thanks to those that commented.

I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).

#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }

The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.

0

精彩评论

暂无评论...
验证码 换一张
取 消