div居中，但如果有竖着的滚动条，div会往左偏，怎么解决？_html/css

回复讨论(解决方案)

首页

web前端

html教程

div居中，但如果有竖着的滚动条，div会往左偏，怎么解决？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:45 AM

本帖最后由 zlbpolly 于 2013-08-07 13:54:46 编辑

div居中滚动条偏

div居中，如果网页内容比较长，出现竖滚动条时，居中的div会受滚动条影响，往左边偏？怎么解决呢？

原本是这样

<!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" ><head>    <title>Untitled Page</title>    <style>html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,blockquote,pre,form,input,textarea,fieldset,table,th,td{margin:0;padding:0}body,button,input,select,textarea{font:12px/1.6 Tahoma,Verdana,Arial,"\5b8b\4f53"}body{background:#fff;color:#7d7d7d;min-width:960px}ul,ol{list-style:none}img{border:0;vertical-align:top}:focus{outline:0}.doc-hd,.doc-bd{width:960px;margin:0 auto}.doc-bd{padding-bottom:20px}.logo{background:url(http://p2.qhimg.com/t011554d7f1d248cbd5.png) no-repeat}.main{width:623px;float:left}.side{width:318px;float:right;border:1px solid #f0f0f0;border-top:0}.bd{padding:10px 15px}.doc-hd{height:52px;position:relative;z-index:999}.logo{width:222px;height:46px;float:left;margin-top:4px;margin-left:-7px}.info{float:left;margin-top:8px}.info a{color:#7d7d7d;font-size:12px}.info a:hover{color:#20a135}.info img{padding-top:4px}.nav{float:right;font:16px/25px "\5fae\8f6f\96c5\9ed1";position:absolute;right:0;top:16px}.nav li{float:left;margin-left:38px}.nav a{height:34px;color:#555;float:left;cursor:pointer;position:relative}.nav a:hover,.nav .cur{color:#20a135}.nav .hot,.nav .new{background-position:-24px -144px;width:23px;height:14px;display:block;position:absolute;right:-24px;top:-2px;*top:-3px}.nav .new{background-position:0 -144px}</style></head><body><div class="doc-hd">	<a target="_self" title="logo" class="logo" href=""></a>	<ul class="nav">		<li><a target="_self" class="cur" href="#">首页</a></li>		<li><a>产品列表</a></li>		<li><a>公司介绍</a></li>		<li><a href="#">产品展示</a></li>		<li><a>个人服务</a></li>		<li><a>企业服务</a></li>		<li><a href="#">游戏</a></li>		<li><a href="#">论坛</a></li>	</ul></div></body></html>

登录后复制

如果加一个div出现滚动条，居中的导航条就往左偏了

<!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" ><head>    <title>Untitled Page</title>    <style>html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,blockquote,pre,form,input,textarea,fieldset,table,th,td{margin:0;padding:0}body,button,input,select,textarea{font:12px/1.6 Tahoma,Verdana,Arial,"\5b8b\4f53"}body{background:#fff;color:#7d7d7d;min-width:960px}ul,ol{list-style:none}img{border:0;vertical-align:top}:focus{outline:0}.doc-hd,.doc-bd{width:960px;margin:0 auto}.doc-bd{padding-bottom:20px}.logo{background:url(http://p2.qhimg.com/t011554d7f1d248cbd5.png) no-repeat}.main{width:623px;float:left}.side{width:318px;float:right;border:1px solid #f0f0f0;border-top:0}.bd{padding:10px 15px}.doc-hd{height:52px;position:relative;z-index:999}.logo{width:222px;height:46px;float:left;margin-top:4px;margin-left:-7px}.info{float:left;margin-top:8px}.info a{color:#7d7d7d;font-size:12px}.info a:hover{color:#20a135}.info img{padding-top:4px}.nav{float:right;font:16px/25px "\5fae\8f6f\96c5\9ed1";position:absolute;right:0;top:16px}.nav li{float:left;margin-left:38px}.nav a{height:34px;color:#555;float:left;cursor:pointer;position:relative}.nav a:hover,.nav .cur{color:#20a135}.nav .hot,.nav .new{background-position:-24px -144px;width:23px;height:14px;display:block;position:absolute;right:-24px;top:-2px;*top:-3px}.nav .new{background-position:0 -144px}</style></head><body><div class="doc-hd">	<a target="_self" title="logo" class="logo" href=""></a>	<ul class="nav">		<li><a target="_self" class="cur" href="#">首页</a></li>		<li><a>产品列表</a></li>		<li><a>公司介绍</a></li>		<li><a href="#">产品展示</a></li>		<li><a>个人服务</a></li>		<li><a>企业服务</a></li>		<li><a href="#">游戏</a></li>		<li><a href="#">论坛</a></li>	</ul></div><div style="height:1000px;border:1px solid #ff0">ddd</div></body></html>

登录后复制

回复讨论(解决方案)

这个是浏览器的特性，你可以通过js来获取宽度
比如

//这个就是body的宽度，那么有滚动条和没有滚动条肯定是不一样的document.body.clientWidth //当然还有其他的属性就不列举了

登录后复制

唉，这样真不是爽，切换页面时，感觉导航左右晃。。。不太懂css，以为有解决办法呢

唉，这样真不是爽，切换页面时，感觉导航左右晃。。。不太懂css，以为有解决办法呢
这样的话可以使用绝对定位来布局，这样就不会晃了~

CSS中设置始终出现滚动条即可。

CSS中设置始终出现滚动条即可。

楼上正解。让右侧一直有滚动条，高度不够的时候就没有bar，相比起因为滚动条的出现与否导致的左右晃动来说，可能更能接受一些吧。

body{overflow-y:scroll;}

登录后复制

另外一种相反的思路是，一直不出现滚动条。然后自己去判断下面的div是不是需要滚动条，如果div的高度>浏览器(页面可见）高度 - 导航栏的高度，就设置overflow：auto。

这样的问题在于，在打开页面和手动改变浏览器大小的时候，都需要去判断。这个倒是可以通过body的onResize方法来捕捉

<body onResize="resizeRightContent();">

登录后复制

但是还是太麻烦了，有点画蛇添足的感觉，还是让滚动条一直出现吧。。。

设置div的样式为：style="margin:auto; 就可以了

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7681

CakePHP 教程

1393

C# 教程

1209

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。