Question

在这个例子中，我需要水平隐藏内容，并将overflow-x设置为hidden。但是，当我这样做时，它也会自动添加垂直滚动条。我已经读过设置overflow-x或overflow-y将另一个设置为auto的情况，从而强制滚动条显示。有办法解决这个问题吗？

http://jsfiddle.net/kwnQk/

<div class="div1">
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</div>

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow-y: visible;
    overflow-x: hidden;
}

div.div2 {
    width: 600px;
    height: 80px;
    background-color: #ebebeb;
    margin-top: 20px;
}

div.div3 {
    width: 90px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #900;
}

Answer 1

删除div.div1的高度，以便div可以增加高度。

Answer 2

如果我理解正确：你想隐藏所有横向溢出的东西。但是，当您添加更多内容时，您希望.div1垂直拉伸吗？

如果是，请将CSS更改为：

div.div1 {
    width: 300px;
    min-height: 300px;
    background-color: #000;
    overflow-x: hidden;
}

检查demo。

或者，如果您希望.div1保持固定的高度，请将overflow-y更改为auto。查看with small content和with long content。

Answer 3

你可以删除x＆amp; y滚动条：

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow: hidden;
}

Answer 4

让width :100%水平显示完整内容

 div.div1 {
        width: 100%;
        height: 300px;
        background-color: #000;
        overflow-y: visible;
        overflow-x: hidden;
    }

Answer 5

我认为这将解决问题：

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    display: block;
    overflow: hidden;
}

当overflow-x被隐藏时隐藏垂直滚动条

5 个答案: