这个问题可能有一个简单的解决方案 我设计了一个并排两列的网站.一切都是固定的(菜单栏和左栏),右栏除外. 这是故意的,因为我只想要滚动右列,它将保存页面的可读内容.一切都很好
我设计了一个并排两列的网站.一切都是固定的(菜单栏和左栏),右栏除外.
这是故意的,因为我只想要滚动右列,它将保存页面的可读内容.一切都很好,对吗?
不完全是,左列向左浮动,右列也浮动有足够大的左边距,以便在加载时正确地坐在页面中.
但是,当屏幕水平太小时,用户可以向左和向右滚动,同时移动第二列,甚至在我固定的第一列下方.这就是我想要阻止的.
如何让第二列垂直滚动但不能水平移动?
这是一个css的snipet:
#main-content {float: left; margin: 100px 0 0 0; background: rgba(128,127,128,0.9); padding: 15px 25px 15px 15px; width: 500px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} #button-glue {float: left; position: fixed; padding: 0 25px 15px 0px; width: 525px;} #button{ float:right; margin: 5px -20px 0 0; } #button a { background:url(../images/button.png) no-repeat; display:block; /* Necessary, since A is not a block element */ width: 167px; height: 58px; } #button a:hover { background:url(../images/buttonhover.png) no-repeat; width:167px; height:58px; } .right {float:right; margin: 0 0 5px 25px;} #secondary-content {float: right; margin: 100px 0 15px 569px; background: rgba(128,127,128,0.9); padding: 20px; background: rgba(128,127,128,0.9); width:405px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
谢谢!
overflow-x:hidden
这将不允许元素上的滚动条并隐藏任何悬挂的东西.