1. 首頁
  2. 問答
  3. 溢出的多選框改變文件的高度

溢出的多選框改變文件的高度

2016-05-23 45 views
0

我有在y方向與下面的CSS滾動一個div：溢出的多選框改變文件的高度

height: auto; 
max-height: 300px; 
overflow: auto;

的問題是，該文本框可以在它與全國幾百個行項目溢出（儘管不可見）正在擴展整個頁面的整體高度，並且超出了頁面的頁腳。

我基本上需要隱藏超過300像素高度的溢出。但是，顯然如果我做溢出：隱藏，我沒有得到一個垂直滾動條。

來源

2016-05-23 bkoenig

+0

我們展示了一個完整的示例，說明您的問題與頁腳。高度：自動;也許是什麼在 –

回答

0

嘗試設置overflow到scroll，應該這樣做。

.overflow { 
 
    display: block; 
 
    height: 300px; 
 
    overflow-y: scroll; 
 
    background-color: white; 
 
    border: 1px solid #AEAEAE; 
 
    margin: 30px; 
 
}
<div class="overflow"> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 

 
</div>

這完全適用於我。

來源

2016-05-23 18:39:05 s1h4d0w

+0

對不起，我忘了提及我已經嘗試過，它有相同的結果。 – bkoenig

+0

@bkoenig我只是將代碼添加到我的答案中，它對我來說非常合適。點擊「運行代碼片段」後，請確保點擊「完整頁面」按鈕，這很難在網站本身的小窗口中看到。 – s1h4d0w

+0

@ s1h4d0w如果你正在考慮我的答案，請加我的名字 – nonstop328

0

，我認爲這可以幫助你

你可以選擇 顯示：內聯塊 - 這是用在你想要的寬度調整像width:100px or width:50%

顯示：塊; - 這是用在寬度100％

.overflow { 
 
    display: block; 
 
    height: 300px; 
 
    overflow-y: scroll; 
 
    border: 1px solid black; 
 
    background-color: yellow; 
 
}
<div class="overflow"> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 

 
</div>

來源

2016-05-23 18:49:25 nonstop328

相關問題

 相關問題