CSS溢出：自动通过'触摸'底部div

Question

我想在触摸底部div时使div可滚动。 我试过这个：

margin-bottom:30px;
position: relative;
overflow: auto;

但它不起作用。 我创建了一个小提示，告诉你我的问题： https://jsfiddle.net/wp3wvuj2/1/

有关说明：当您在输入字段中键入时，会向div添加一个新字段（此功能已简化）。我希望在输入字段触摸下面的元素（START-div）之前它可以滚动（溢出：自动）。

有人有想法吗？

编辑： 我注意到没有人理解我的问题。 我会尝试更好地解释它： 我有玩家添加姓名的列表。该列表最少有4名玩家，最大∞。

开始按钮位于底部。问题是在iphone 5中看起来像这样：

现在，如果我要添加另一个玩家输入字段，它将与START-Button重叠。这就是为什么我现在想要它可滚动的原因。我已经以固定的高度完成了这项工作，但我希望它具有响应性！

因为在iPad上，例如它看起来像这样：

我希望防止与开始按钮重叠，如下所示：

因此它应该在重叠之前可以滚动（取决于显示大小）。

Answer 1

更新了JS小提琴，试试这个，我在你的代码中更新了CSS部分

https://jsfiddle.net/wp3wvuj2/2/

.main_input {
   width: 209px;
   top: 70px;   
  margin: auto;
  margin-bottom:30px;
  /* position: relative */ 
  overflow: auto;
  height:216px; //Give some height always to apply overflow auto
}

.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}

Answer 2

我只更改了类main-input

上的样式

.main_input {
    width: 226px;
    height: 234px;
    top: 70px;
    margin: auto;
    margin-bottom:30px;
    position: relative;
    overflow-y: auto;
}

编辑：

请注意，要使此解决方案能够工作，我需要删除某些元素的顶部和底部位置，因为它们会破坏布局。请使用边距或填充来获得您想要的样式。

现在可以在页面空间用完后滚动。

https://jsfiddle.net/wp3wvuj2/5/