我的网站上有一个奇怪的问题。加载时我的网站看起来不错。当我点击并向右拖动我页面上的某个区域时,所有页面都向左移动,我在右边有一个空白区域。
截图:
CSS:
body {
background-color: #fff;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', Verdana, Tahoma, Arial;
height: 100%;
overflow-x: hidden;
}
#wrap {
width: 1050px;
margin: 0 auto;
position: relative;
z-index: 1000;
text-align: left;
}
#header {
width: 190px;
position: absolute;
top: 7px;
}
#main {
position: absolute;
top: 12px;
left: 100px;
}
#scrollable {
position: absolute;
left: 0px;
width: 100%;
z-index: 0;
}
.scrollableArea {
position: relative;
}
HTML Skeleton:
<body>
<div id="wrap">
<div id="page">
<div id="header"></header>
<div id="main"></div>
</div>
</div>
<div id="scrollable" class="holder">
<div id="scrollableWrapper" ></div>
<div id="scrollableArea" ></div>
</div>
</body>
希望我已经提供了所需的所有信息。似乎无法解决这个问题。我认为这与可滚动的div有关。 ScrollableArea可能比视口大得多,并且超出了屏幕限制,但它不可见,不会显示滚动。
感谢。
答案 0 :(得分:1)
删除:body { overflow-x: hidden; }