一般容器 - CSS水平滚动条问题 [英] general container - CSS horizontal scrollbar problem

问题描述

这是这个问题的后续行动：

一般容器 - IE8水平滚动条问题

我想创建一个 float：left （或'位置：绝对' - 同样的问题）容器

垂直约束（它有一个固定的外部高度） - 所以它可能有一个垂直滚动条;

，但可以增长水平（根据需要的容器内容），所以它从来没有一个水平滚动条

它必须工作在IE8，FF，铬（没有IE7或更早）

解决方案似乎是微不足道的
，但我不能摆脱在FF或铬水平滚动条（IE8是行）： p>

 < div style =float：left; height：20em; overflow-y：auto;类= 容器DIV > 
< div style =width：30em; height：30em; background-color：red;类= 示例内容 >< / DIV> 
< / div> 
  

http://jsfiddle.net/slobo/pydsZ/

在这个例子中，我们需要一个20em高的容器，可以水平增长，根据内容的需要（在这种情况下，example-contentdiv）

请不要修改example-contentdiv，因为它只是一个示例内容（任何内容可能在那里）

修改 overflow-y：auto 到 overflow-y：滚动解决问题;但我想保留 overflow-y：auto

解决方案

if



  overflow-x：hidden 
   / pre> 
this is a follow-up to this issue:

general container - IE8 horizontal scrollbar problem

I would like to create a float:left (or 'position: absolute' - the same problem) container

that is constrained vertically (it has a fixed outer height) - so it may have a vertical scrollbar;

but that can grow horizontally (as needed by the content of the container), so it never has a horizontal scrollbar  

it has to work in IE8, FF, Chrome (no IE7 or earlier)  

the solution seems to be trivial

but I can not get rid of the horizontal scrollbar in FF or Chrome (IE8 is OK):
<div style="float: left; height: 20em; overflow-y: auto;" class="container-div">
    <div style="width: 30em; height: 30em; background-color: red;" class="example-content"></div>
</div>
http://jsfiddle.net/slobo/pydsZ/

in this example, we need a 20em high container, that can grow horizontally, as needed by the content (in this case, the "example-content" div)

please don't suggest to modify the "example-content" div, as it is just a sample content (any content could be there)

modifying overflow-y: auto to overflow-y: scroll solves the problem; but I would like to keep overflow-y: auto
解决方案
if you don't want the horizontal scrollbar:
overflow-x: hidden


                        
这篇关于一般容器 -  CSS水平滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！