溢出：滾動不能使用絕對定位的子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？

回答

相關問題