1. 首页
  2. 问答
  3. 溢出的多选框改变文件的高度

溢出的多选框改变文件的高度

2016-05-23 42 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

相关问题

 相关问题