溢出：滚动不能使用绝对定位的子div？

我有一个绝对定位的子div，其中包含来自我的输入字段的输出文本的布局问题。我希望它的wrapper div能够在子div达到顶部时垂直滚动（文本必须从底部填充包装div），但是这并没有发生，滚动条仍然没有激活（我看不到我的“input1”，就像你在图2中看到的那样）。溢出：滚动不能使用绝对定位的子div？

我创建了一个简单的示例，以显示当到达顶部时，子级消失超过父级。这是正在发生的事情在屏幕上：

而且我的CSS代码：

#wrapperWithScrollbarForOutput { 

    background-color: #453750; 
    width: 280px; 
    height: 200px; 
    position: absolute; 
    margin-top: 30px; 
    overflow-y: scroll; 
} 

#outputDivForText { 

    background-color: #73648A; 
    position: absolute; 
    bottom: 0; 
} 

#inputDiv { 

    background-color: #9882AC; 
    position: absolute; 
    margin-top: 230px; 

}

和HTML：

<!doctype html> 
<html> 
    <head> 
     <title>Writing from bottom up.</title> 
     <script src="myscript.js"></script> 
     <link rel="stylesheet" href="myStyle.css"> 
    </head> 
    <body> 
     <div id="wrapperWithScrollbarForOutput"> 
      <div id="outputDivForText"></div> 
     </div> 
     <div id="inputDiv"> 
      <input type="text" id="myInput"> 
      <button onclick="buttonClicked()">Publish</button> 
     </div> 
    </body> 

</html>

预先感谢您！

来源

2017-04-15 eli6

可以请你添加一些HTML代码 –

从第一眼看上去就像你向上添加文本，它实际上是推动文本关闭屏幕，以便滚动将不会生效。 –

我想要“推动”发生，至少在视觉上，以便我可以在底部添加更多的输入，但我也希望能够滚动，以便我可以看到第一个。你知道一个更好的方法吗？它也会把第一个输入放在底部（如图1所示）？ – eli6

更新#outputDivForText CSS与我的CSS

#wrapperWithScrollbarForOutput { 
    background-color: #453750; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    overflow-y: auto; 
} 

#outputDivForText { 
background-color: #73648A; 
display: table-cell; 
vertical-align: bottom; 
width: 50px; 
height: 200px; 
overflow: auto; 
} 

#inputDiv { 
    background-color: #9882AC; 
}

来源

2017-04-15 10:05:54

这实际上把第一个输入（或outputDiv更精确）放在包装的顶部，但我希望它从底部开始（如图1），并且我希望在第一个输出时发生滚动后来达到顶峰。 – eli6

好的在这里检查小提琴https://jsfiddle.net/pbf38mqw/ –

好的等待我uderstanded你的问题 –

溢出：滚动不能使用绝对定位的子div？

回答

相关问题