Question

我有一个绝对定位的子div的布局问题，其中包含来自输入字段的输出文本。我希望它周围的包装器div在子div到达顶部时垂直滚动（文本必须从下到上填充包装器div），但是这没有发生，滚动条保持不活动状态（我无法看到我的“input1”了，如图2所示。

我创建了一个简单的例子来表明孩子在到达顶部时消失在父母之外。这就是屏幕上发生的事情：

http://errors.angularjs.org/1.5.0/

我的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>

提前谢谢！

Answer 1

用我的css

更新#outputDivForText css

let a

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

1 个答案: