Question

在深入研究一些搜索结果后，我发现，我正在努力实现完全不同的东西。

就我而言，孩子div最初会包含一些文字。最终会有更多的文字附加到孩子身上。当文字height超过父div＆＃39; 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>

如何解决我的案子？

Answer 1

.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>

Answer 2

完美地尝试这个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>

父母是绝对的;仅当子项超出父项高度限制时才为其提供滚动条

2 个答案: