我有一个div容器,并定义了它的样式如下:
div#tbl-container { width: 600px; overflow: auto; scrollbar-base-color:#ffeaff }
一旦我填充了这个div所包含的表格,这会自动给我水平和垂直滚动条.我只想要自动出现水平滚动条.我将以编程方式修改表的高度.
我该怎么做呢?
除非您使内容足够大以满足要求,否则不应同时获得水平和垂直滚动条.
但是,由于存在错误,您通常会在IE中执行此操作 检查其他浏览器(Firefox等)以确定它是否实际上只是IE正在这样做.
IE6-7(以及其他浏览器)支持建议的CSS3扩展来独立设置滚动条,您可以使用它来抑制垂直滚动条:
overflow: auto; overflow-y: hidden;
您可能还需要为IE8添加:
-ms-overflow-y: hidden;
因为微软威胁要在IE8标准模式下将所有CR前标准属性移动到他们自己的'-ms'框中.(如果他们总是以这种方式做到这一点会有意义,但现在对每个人来说都是一种不便.)
另一方面,IE8完全有可能修复bug.
我还必须添加white-space: nowrap;
样式,否则元素将包含到我们正在删除滚动功能的区域.
此解决方案没有父div的高度/宽度规范,因此它将响应窗口大小调整,并且最有用的原因只是在需要时出现水平滚动条.
.container{ padding:20px; border:dotted 1px; white-space:nowrap; overflow-x:auto; } .box{ width:100px; height:180px; background-color: red; margin:10px; display:inline-block }
看看DEMO
要显示两者:
隐藏X轴:
隐藏Y轴:
你也可以制作它overflow: auto
并给出一个最大的固定高度和宽度,当文本或其中的任何内容溢出时它将只显示所需的滚动条
我使用CSS属性:1)" overflow-x: auto
"; 2)" overflow-y: hidden
"; 3)" white-space: nowrap
";
不要忘记为容器和内部DIVS组件设置宽度.属性"white-space:nowrap"允许内部DIVS不会掉落在不同的行上.
考虑以下HTML:
我使用以下CSS只有一个水平滚动:
.container { height: 80px; width: 600px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .inner-1,.inner-2,.inner-3 { height: 60px; max-width: 250px; display: inline-block; /* this should fix it */ }
小提琴:https://jsfiddle.net/qrjh93x8/(不使用上面的代码)