Nic*_*lis 44 html css overflow
问题是:
我有一个全宽度条形菜单,通过在右侧和左侧创建一个大的边距.这个边距应该被裁剪overflow-x: hidden,它是......没有滚动条,一切(视觉上)都可以......
但是,如果你拖动页面(使用Mac Lion)或向右滚动,页面会显示一个巨大的条形图,它应该被裁剪掉overflow-x:hidden.
html {
margin:0;
padding:0;
overflow-x:hidden;
}
body {
margin: 0 auto;
width: 950px;
}
.full, .f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full, .f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}
这是一个链接:http://jsfiddle.net/NicosKaralis/PcLed/1/
你必须在草稿中打开才能看到... jsfiddle css以某种方式使它工作.
我有这样的结构:
body
div#container
div#menu_bar
div#links
div#full_bar
div#content_body
...
#container是一个居中的div,固定宽度为950px,#fulll_bar是一个在整个窗口上延伸的条形,从一侧到另一侧
如果我在#full_bar中放置100%的宽度,它将只获得内部宽度而不是窗口宽度
ign*_*aur 103
我有同样的问题.我通过把解决它overflow-x: hidden;在两者的body和html.
html {
margin: 0 auto;
padding: 0;
overflow-x: hidden;
}
body {
margin: 0 auto;
overflow-x: hidden;
width: 950px;
}
.full {
background: red;
color: white;
}
.full,
.f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full,
.f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}<div>
<div class="full">
abc
</div>
</div>小智 33
还有另一种方法可以通过一行代码解决此问题:
body {
/* All your regular code including overflow-x: hidden; */
position:relative;
}
这解决了我在webkit上的问题(Mac)
参考:http://www.tonylea.com/2010/safari-overflow-hidden-problem/
html, body {
overflow-x: hidden;
width: 100%;
}
解决了我的问题,除了IE - 如果你努力这样做,你仍然可以将网站拖到右边.
使用overflow: hidden;删除垂直滚动条,因此这不是一个解决方案.
我无法使用JavaScript找到更好的解决方案.
我认为没有任何方法可以防止在不使用JavaScript的情况下滚动元素.但是,使用JS,将scrollLeft设置为0 onscroll非常容易.
我在这里找到了解决方案/sf/answers/657960061/
你将必须把一个#wrapper围绕您的内容.overflow:hidden在这body将无法奏效.
#wrapper {position: absolute; width: 100%; overflow-x: hidden}
在这里HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div class="yourContent"> ... </div>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
80736 次 |
| 最近记录： |