父母是絕對的;給孩子一個滾動條時，只有當它超過了父母的高度範圍

挖掘到一些搜索結果後，我發現，我試圖達到完全不同的東西。父母是絕對的;給孩子一個滾動條時，只有當它超過了父母的高度範圍

對我而言，孩子div最初將包含一些文字。最終會有更多的文字被添加到孩子身上。當文本height超出父div的height，那麼應該滾動子div。問題是，在將新文本添加到子項後，滾動條就會出現。它忽略了孩子div身高是否超過父母的情況。

<div id="parent" style="position:absolute; top : 40px; height:auto; bottom : 60px; overflow-x:hidden;> 
    <div id="child" style="overflow-y:auto"> 
     <p style="text-align:center;">some text</p> 
    </div> 
</div>

如何解決我的情況？

來源

2015-10-04 Md. Arafat Al Mahmud

可滾動的項目應該有一個固定的高度，所以它「知道」什麼時候開始滾動（或能夠根據父div來計算的話）。例如，你可以爲父div設置一個'height：100px;'，然後爲子div設置一個'max-height：100％;'。 –

.child{ 
    top:0; 
    bottom:0; 
    overflow-y:auto; 
    position:absolute; 
} 
<!--update --> 
    <div id="parent" style="position:absolute; top : 40px; height:300px; bottom : 60px; overflow-x:hidden;"> 
     <div id="child" style="overflow-y:auto"> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
      some text <br /> 
     </div> 
    </div>

來源

2015-10-04 16:54:02 Omidam81

請參閱我的編輯。將子div設置爲絕對將段落文本設置爲居中。 –

將父級的高度更改爲固定值，例如100px; – Omidam81

它完美地嘗試這個Demo

<div id="parent" style="position:absolute; top : 40px; height:200px; bottom : 60px; overflow-x:hidden;border:1px solid red;"> 
    <div id="child" style="overflow-y:auto;width:100px;"> 
     some text 
    </div> 
</div>

來源

2015-10-04 17:01:18 Diptox

我沒有修復孩子的身高 – Diptox

父母是絕對的;給孩子一個滾動條時，只有當它超過了父母的高度範圍

回答

相關問題