Question

我有一个有两个孩子的父元素。一个孩子是动态ul，管理员将根据需要添加和删除菜单链接。第二个孩子是一个滚动框，里面有饲料。您可以将其映像为Twitter提要，因为这是它让我想起的。

我遇到的问题是，由于我无法定义第一个孩子的身高，我无法让第二个孩子行动正确。我不希望父节点上有滚动条，但是当它到达父节点底轴的末尾时，希望第二个子节点上有一个y滚动条。到目前为止，我可以让父母有一个滚动条并切断底部访问的第二个孩子，或者我可以让第二个孩子完全溢出父母。

感谢。

<style>
.inline-block { display: inline-block; vertical-align: top; }
.nowrap { white-space: nowrap; }
#sidebar { width: 256px; padding: 11px 10px 10px; margin: 0 20px 0 0; border: 2px solid #969696; background: #e8e8e8; height: 636px; }
#ad_list { width: 244px; border: 1px solid #969696; padding: 6px 5px 5px; margin: 20px 0 0; overflow: auto; }
.ad_link { white-space: normal; margin-bottom: 10px; border-bottom: 1px solid #969696; padding-bottom: 10px; }
</style>

<aside id="sidebar" class="inline-block">
    <ul id="sidebar_links">
        <li class="link_button">Item 1</li>
        <li class="link_button">Item 2</li>
    </ul>
    <ul id="ad_list">
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
        <li class="ad_link"><a href="/">This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy. This is some ad copy.</a></li>
    </ul>
</aside>

Answer 1

只需向#ad_list添加一个高度即可。

#ad_list { height:500px; }

滚动父元素内的子元素？

1 个答案: