在隐藏overflow-x时隐藏垂直滚动条

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

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; 
}

来源

2013-08-22 AndroidDev

为什么不设置*溢出-Y：隐藏; *至* DIV1 * ？ – Krasimir

因为如果div3中的内容垂直增长，它必须显示。我希望Y只是在没有滚动条的情况下成长。 – AndroidDev

你是怎么做的..你想完全隐藏滚动条吗？ –

-1

给width :100%充分展现内容上div.div1水平

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

来源

2013-08-22 07:32:46 speeday125

不，div1的宽度必须有限制。 – AndroidDev

删除高度，这样可以DIV高度成长。

来源

2013-08-22 07:41:51

如果我理解正确：你想隐藏所有的水平溢出。但是当你添加更多内容时你想要.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。

来源

2013-08-22 07:44:10 LinkinTED

-1

我认为这将是解决这一问题：

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

来源

2013-08-22 07:45:49

你可以删除X &Ÿ滚动条具有：

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

来源

2013-08-22 07:46:42

在隐藏overflow-x时隐藏垂直滚动条

回答

相关问题