Question

这可能很难准确显示我想要完成的事情，所以请耐心等待。

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

这里有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个结果，这很好。

当出现溢出时，底部边框消失，直到用户滚动到底部。

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

处理边界底部的最佳方法是什么？我在google上找到了一些方法来确定div上的滚动条是否处于活动状态，但是有更多的方法可以处理底部边框吗？

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

由于

Answer 1

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

max-height:150px;

http://jsfiddle.net/6bbQT/

JS CSS border-bottom自动完成结果

1 个答案: