• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

margin:0 auto;居中时出现滚动条时左右抖动

前端 开心洋葱 1773次浏览 0个评论

使用DIV+CSS网页设计时,当网页有的页面高度没有屏幕高时,网页不会出现滚动条,如果在同样的网站里用margin:0 auto;使网页的DIV居中,如果其中一网页高度超过屏幕(分辨率)高度时,网页(浏览器)出现滚动条,此时,在点击同一个网站的页面时,会出现里面内容左右抖动(变形),因为网页出先滚动条,页面的宽度变窄,居中时的位置和上一个没有滚动条的页面会出现滚动条宽度除以2的差值,我们可以在没有滚动条时也显示滚动条就可以解决了。

居中时,打开网页的一瞬间网页会向左摆一下,进了另一个页面时,网页又会向右摆一下,原因是网页的高度不够时,右边的上下拖拉滚动条不会显示,这里网页的宽要加上滚动条的宽,margin:0 auto;时,网页的是居中的,但网页的高能够让浏览器出现滚动条时,这里的网页的宽当然就要减去滚动条的宽了,这时网页就会向左摆一点,应该有好多人都有过这种情况,解决方法很简单,在CSS中定义让它右滚动条一直出现就可以啦,网页高度不够出现右滚动条时,也让它出来,看下面CSS代码:

 

html{overflow-y:scroll;}   
 

 

如果此时问题没有解决,检查一下网页DTD部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明margin:0 auto;居中时出现滚动条时左右抖动
喜欢 (1)

您必须 登录 才能发表评论!

加载中……