在隱藏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時隱藏垂直滾動條

回答

相關問題