大佬教程收集整理的这篇文章主要介绍了css – 使用全长,不包括溢出滚动条和“position:absolute”,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
问题是红色div与滚动条重叠.我猜是正确的:0表示div.wrapper的右侧;它不会减去div.main的滚动条.当我移动溢出时:滚动到div.wrapper,然后红色横幅具有正确的大小(fiddle).但是,它不再处于固定位置(向下滚动使横幅向上滚动).
我怎样才能一起完成以下两件事?
>红色横幅位于固定位置,如this fiddle所示.
>红色横幅的宽度除了滚动条,如this fiddle所示.
我想在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; }
$(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(); });
然后:
$("div.red-bAnner").css({ right: SCROLLBAR_WIDTH });
以上是大佬教程为你收集整理的css – 使用全长,不包括溢出滚动条和“position:absolute”全部内容,希望文章能够帮你解决css – 使用全长,不包括溢出滚动条和“position:absolute”所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。