0

这可能很难准确地展示我想要完成的事情，所以请多多包涵。

我有一个自动完成的结果框，我的样式有问题。

这里有2个div：

<div id="SearchResultsContainer">
<div id="SearchResults">

</div>
</div>

使用这个 CSS：

#SearchResults {
    border: 2px solid #666;
    margin: 0px auto;
    width: 100%;
}

#SearchResultsContainer {
    margin: 0px auto;
    width: 54%;
    height: 200px;
    overflow-y: auto;
    display: none;
    padding-right: 4px;
}

好的，现在解决问题。使用这种样式，内部 SearchResults div 设置边框的样式。如果有 2 个结果，这很好。

当有overflow-y时，底部边框消失，直到用户滚动到底部。

如果我将边框底部添加到 SearchResultsContainer 中，则边框将放置在 200px 高 SearchResultsContainer 的底部，无论有多少结果，因此它看起来像屏幕上的一条浮动线。

处理边框底部的最佳方法是什么？我在谷歌上找到了一些方法来确定滚动条是否在 div 上处于活动状态，但是有没有更优雅的方法来处理底部边框？

我希望我能很好地解释这个问题，如果没有，请询​​问！

谢谢

4

1 回答 1

0

基本上，所需的功能是让边框随着内容扩展直到某个点，然后使内容可滚动。这可以通过max-height属性来完成。

max-height:150px;

http://jsfiddle.net/6bbQT/

于 2011-10-06T18:02:58.513 回答