滚动条是容器所固有的，不管是外面的滚动条，还是里面的滚动条，只要让固定的div和body或者html容器脱离关系，即可实现DIV固定在页面而不随着滚动条随意滚动。
1.html,body，将默认出现的滚动条，完全地隐藏，这样不管什么内容都不会出现了。
2.virtual_body，写一个假的body，设置它的长宽为100%，这样利用可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。
3.fixed_div，用它进行绝对值进行定位，因为在这个容器下，该页面100%的被假冒body覆盖了，滚动条自然也显示不出来了。
4.<html><head><title></title><style type="text/css">html,body { overflow:hiddenmargin:0pxwidth:100%height:100%} .virtual_body { width:100%height:100%overflow-y:scrolloverflow-x:auto} 。
5.fixed_div { position:absolutez-index:2008bottom:20pxleft:40pxwidth:800pxheight:40pxborder:1px solid redbackground:#e5e5e5 }。
6.</style></head><body><div class="fixed_div">I am still here!</div><div class="virtual_body"><div style="height:888px">I am content ! </div></div></body></html>。
我们在写html定义属性表的时候，经常会遇到这样的问题。
明明定义的宽和高都为100%，为什么body范围还是会超过屏幕范围呢，呈现结果如下：
我们通过显示margin边界可以看到其实，body默认是有margin值的：
通过在chrome中查看F12，也可以看到body的style中其实是有个默认的margin值的
overflow-y:scroll 就是显示纵向滚动条的。建议写overflow-y:auto；
overflow属性值 ：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）