background css 100% width horizontal scroll issue

心已入冬 提交于 2019-12-01 17:29:40

The best way to solve this issue is via CSS.

Apply a min-width to its parent container and make sure its children have a width: 100%. See below:

.containerMain {
    width: 100%;
    min-width: 900px;
}
.footer {
    width: 100%;
}

I suggest you one solution with jquery:

$(window).bind('resize', resizeHandler);

function resizeHandler(){
var newWidth = $(document).width();

$('.footerWrapper').css('width', newWidth);

}

Put to function divs that you want to fit the document width and add to body onload="resizeHandler()" attribute.

Below CSS properties should be able to solve the trick.

.divwithbackground{ overflow-x: hidden;}

This cannot be achieved by css only. You need to have jquery integration.

$('.footer').css({width:$('html').outerWidth()+$(window).scrollLeft()});

Try this. Should work!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!